/* Variation 2: Vertical list with left-border active highlight */
.sidebar-nav.sn-list {
    background-color: var(--light);
    border: 2px solid var(--medium);

    .sidebar-nav-toggle {
        padding-bottom: calc(var(--item-gap) * .75);
        border-bottom: 1px solid var(--gray);

        @media (max-width: 1023px) {
            &[aria-expanded="false"] {
                padding-bottom: 0;
                border-bottom: none;
            }
        }

        @media (min-width: 1024px) {
            padding-bottom: 0;
            border-bottom: none;
        }
    }

    .sidebar-nav-icon {
        color: var(--medium);
    }

    .sidebar-nav-list {
        gap: 0;

        li {
            margin-bottom: calc(var(--item-gap) * .25);
        }

        a {
            padding: calc(var(--item-gap) * .3);
            border-radius: var(--radius-sm);


            &:hover {
                color: var(--white);
                background-color: var(--medium);
            }
        }

        .active {
            a {

                color: var(--white);
                background-color: var(--dark);

            }


        }
    }
}