.sorterDiv{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
}

.sorterDiv > div{
    display: flex;
    border-radius: 20px;
    box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 60%);
    
}

.sorterDiv .direction{
    background: white;
    border: 1px solid var(--bs-primary);
    border-radius: 20px 0 0 20px;
    color: var(--bs-primary);
    height: 30px;
    width: 30px;
    position: relative;
    transition-duration:.3s;
}

.sorterDiv .direction:hover, .sorterDiv .direction:focus-visible{
    color:white;
    background:var(--bs-primary);
    outline: none;
}

.sorterDiv .direction > svg{
    position: absolute;
    top: 3px;
    left: 4px;
}

.sorterDiv .list{
    border: 1px solid var(--bs-primary);
    margin-left: -1px;
    border-radius: 0 20px 20px 0;
    cursor:pointer;
}

.sorterDiv .list:focus-visible{
    outline: none;
    box-shadow: inset 0px 0px 3px 0px var(--bs-primary);
}