input#view-edit,
input#view-grid,
input#view-list{
    display: none;
}


.view-toggle{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: calc(var(--padding-inner)*0.5);
    p{
        font-weight: 500;
        padding-right: 1.5ch;
    }

    label{
        .txt{
            font-weight: 700!important;
        }
    }
}




input#view-edit:checked ~ .group-sort-view .view-toggle label[for="view-edit"],
input#view-list:checked ~ .group-sort-view .view-toggle label[for="view-list"],
input#view-grid:checked ~ .group-sort-view .view-toggle label[for="view-grid"],
input#view-edit:checked ~ .view-toggle label[for="view-edit"],
input#view-list:checked ~ .view-toggle label[for="view-list"],
input#view-grid:checked ~ .view-toggle label[for="view-grid"]{
    background-color: var(--color-txt);
    color: var(--white);
    border-color: var(--color-txt);
    svg {
        fill: var(--white);
    }

}