@import "variables";
@import "effects";

vn-item-waste-index,
vn-item-waste-detail {
    .header {
        padding: 12px 0 5px 0;
        color: gray;
        font-size: 1.2rem;
        border-bottom: $border;
        margin-bottom: 10px;

        & > vn-none > vn-icon {
            @extend %clickable-light;
            color: $color-button;
            font-size: 1.4rem;
        }

        vn-none > .arrow {
            transition: transform 200ms;
        }
    }

    vn-table vn-th.waste-family,
    vn-table vn-td.waste-family {
        max-width: 64px;
        width: 64px
    }
    .hidden {
        display: none;
                
    }
    .header > vn-none > .arrow.hidden {
        display: block;
        transform: rotate(180deg);
    }
}