ul.selection-list {
    background: white;
    border-radius: 0.5rem;
}

ul.selection-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.13rem rgb(236, 236, 236) solid;
    padding: 1rem 1rem 1rem 1.5rem;
}

ul.selection-list li:last-child {
    border-bottom: none;
}

ul.selection-list a {
    display: block;
    text-decoration: none;
    color: black;
    width: 100%;
}

ul.selection-list li.nav-item::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-right: 0.125em solid rgb(184, 184, 184);
    border-top: 0.125em solid rgb(184, 184, 184);
    transform: rotate(45deg);
}

ul.selection-list a:visited {
    color: black;
}

ul.selection-list li:has(a:active) {
    background-color: rgb(203, 203, 208);
}

ul.selection-list a:hover {
    color: black;
}

ul.selection-list a:focus {
    color: black;
}

ul.selection-list li {
    display: flex;
    justify-content: space-between;
}

ul.selection-list li label {
    align-self: center;
}

@media (prefers-color-scheme: dark) {
    ul.selection-list {
        background: rgb(26, 26, 28) !important;
    }

    ul.selection-list li {
        border-bottom-color: rgb(34, 34, 36) !important;
    }

    ul.selection-list li.nav-item::after {
        border-right: 0.125em solid rgb(74, 74, 75);
        border-top: 0.125em solid rgb(74, 74, 75);
    }

    ul.selection-list a {
        color: white !important;
    }

    ul.selection-list a:visited {
        color: white !important;
    }

    ul.selection-list a:focus {
        color: white !important;
    }

    ul.selection-list li:has(a:active) {
        background-color: rgb(51, 51, 52) !important;
    }

    ul.selection-list a:hover {
        color: black;
    }
}

@media (min-width: 768px) {
    ul.selection-list {
        width: 80% !important;
    }
}