css for sortable table columns like mac finder

_sort.scss

$sort-triangle-size: .6em;

.sort__cell {
    padding: 0;
}

.sort__trigger {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    &[class] {
        outline: 0;
        color: inherit;
        background: inherit;
    }
    &::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        padding: 0;
        border-style: solid;
        border-color: $base transparent;
        border-width: 0 $sort-triangle-size/1.5;
        @include px-rem(margin-left, $half-spacing-unit);
    }
    &:focus::after,
    &:hover::after,
    &:active::after {
        border-color: $gray5 transparent;
    }
}

.is-sort-up.is-sort-current::after,
.is-sort-up:focus::after,
.is-sort-up:hover::after,
.is-sort-up:active::after {
    border-bottom-width: $sort-triangle-size;
    border-top-color: transparent;
}

.is-sort-down.is-sort-current::after,
.is-sort-down:focus::after,
.is-sort-down:hover::after,
.is-sort-down:active::after {
    border-top-width: $sort-triangle-size;
    border-bottom-color: transparent;
}