.sort{

    display: flex;
    align-items: center;
    gap: 1ch;

    .arrow{
        line-height: 0;
        --size:  12px;
        height: var(--size);
        width: var(--size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: -2px;
        transform: rotate(90deg);
        transition: transform 0.2s ease-in;
        svg{
            width: 100%;
            fill: var(--color-txt);
        }
        
    }


    &[data-sort-type="up"]{
        .arrow{
            transform: rotate(-90deg);
        }
    }

    &[data-sort="false"]{
        color: var(--color-txt-light);
        svg{
            fill: var(--color-txt-light);
        }

    }



    &[data-sort="false"],
    &[data-sort="true"]{
        &:hover{
                color: var(--grey-100);
                svg{
                    fill: var(--grey-100);
                }
            }
        
    
    }



}