/* Variation 1: Pill tags in a flex-wrap grid */
.sidebar-nav.sn-pills {
    padding: calc(var(--item-gap)*.7);
    background-color: var(--gray);

    @media (min-width: 1024px) {
        background-color: transparent;
        padding: var(--item-gap) 0;

    }

    .sidebar-nav-toggle {
        padding-bottom: calc(var(--item-gap) * .75);
        border-bottom: 1px solid var(--border-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-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: calc(var(--item-gap) * .5);

        a {
            padding: calc(var(--item-gap) * .35) calc(var(--item-gap) * .75);
            border-radius: var(--radius-sm);
            background-color: var(--white);
            border: 1px solid var(--border-gray);
            font-size: var(--text-2xs);

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

            @media (min-width: 1024px) {
                background-color: var(--gray);
            }
        }

        .active a {
            background-color: var(--dark);
            border-color: var(--dark);
            color: var(--white);
        }
    }
}