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

vn-th {
    font-weight: normal;
}

vn-th[field] {
    &.active > :after {
        color: $color-font;
        opacity: 1;
    }
    &.desc > :after {
        content: 'arrow_drop_down';
    }
    &.asc > :after {
        content: 'arrow_drop_up';
    }

    & > :after {
        font-family: 'Material Icons';
        content: 'arrow_drop_down';
        position: absolute;
        color: $color-spacer;
        font-size: 1.5em;
        margin-top: -2px;
        opacity: 0
    
    }
    &:hover > :after {
        opacity: 1;
    }
}