.table-sort {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;

    >span {
        white-space: nowrap;

        @media screen and (-ms-high-contrast: active),
        (-ms-high-contrast: none) {
            white-space: normal;

        }
    }

    .sort-icon {
        display: inline-block;
        text-align: center;
        width: 10px;
        height: 22px;
        margin-left: 15px;

        .fa {
            display: block;
            height: 5px;
            font-size: 12px;
            color: color-mix(in srgb, white 20%, var(--text-600));
        }

        &.active-asc {
            .fa-sort-desc {
                display: none;
            }

            .fa-sort-asc {
                color: var(--primary);
                font-size: 22px;
                line-height: 1.3;
            }
        }

        &.active-desc {
            .fa-sort-asc {
                display: none;
            }

            .fa-sort-desc {
                color: var(--primary);
                font-size: 22px;
                margin-top: -5px;
            }
        }
    }
}