.sort-button {
    box-sizing: border-box;
    appearance: none;
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-decoration: none;
    color: inherit;
    cursor: pointer;

    &:focus-visible {
        outline: var(--ds-border-width-focused, 2px) solid var(--ds-border-focused, #4688ec);
        outline-offset: var(--ds-border-width-focused, 2px);
    }

    & .sort-icon {
        display: flex;
        align-items: center;
        opacity: 0;
        color: var(--ds-text-subtle, #505258);
    }

    & .sort-asc {
        display: none;
    }

    &:hover .sort-icon,
    &:focus-visible .sort-icon,
    &.asc .sort-icon,
    &.desc .sort-icon {
        opacity: 1;
    }

    &.asc .sort-asc {
        display: flex;
    }

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