table[data-sortable] th:not([data-sortable="false"])
{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    cursor: pointer;
}

table[data-sortable] th::before,
table[data-sortable] th::after,
th.sorted::before,
th.sorted::after
{
    content: "\f15d";
    font-weight: 300;
    font-size: 80%;
    color: var(--color-muted);
}
table[data-sortable] th::before,
th.sorted::before
{
    margin-right: 4px;
    visibility: hidden;
    display: none;
}
table[data-sortable] th::after,
th.sorted::after
{
    margin-left: 4px;
    visibility: hidden;
}

table[data-sortable] th.text-right::before,
th.sorted.text-right::before
{
    display: inline;
}
table[data-sortable] th.text-right::after,
th.sorted.text-right::after
{
    display: none;
}

table[data-sortable] th[data-sorted="true"]::before,
table[data-sortable] th[data-sorted="true"]::after,
th.sorted::before,
th.sorted::after
{
    visibility: visible;
}

table[data-sortable] th[data-sorted-direction="ascending"]::before,
table[data-sortable] th[data-sorted-direction="ascending"]::after,
th.sorted.sorted-ascending::before,
th.sorted.sorted-ascending::after
{
    content: "\f15d";
}

table[data-sortable] th[data-sorted-direction="descending"]::before,
table[data-sortable] th[data-sorted-direction="descending"]::after,
th.sorted.sorted-descending::before,
th.sorted.sorted-descending::after
{
    content: "\f882";
}

.col-sort-icon
{
    color: var(--color-muted);
    font-size: 80%;
    margin-left: 4px;
}