@layer components {
    nav.primary {
        background-color: var(--color--brand--97);
        overflow-y: auto;

        font-family: var(--font--title--family--xxsmall--all-caps);
        font-size: var(--font--title--size--xxsmall--all-caps);
        font-weight: var(--font--title--weight--xxsmall--all-caps);
        line-height: var(--font--title--line-height--xxsmall--all-caps);
        letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
        text-transform: var(--font--title--casing--xxsmall--all-caps);

        & h2 {
            text-align: center;
            border-bottom-style: solid;
            border-bottom-width: var(--size--border);
            border-bottom-color: var(--color--border);
            color: var(--color--text--primary);
            margin-bottom: 0;
            padding-block: var(--space-xl-new) var(--space-xl);

            font-family: var(--font--title--family--large);
            font-size: var(--font--title--size--large);
            font-weight: var(--font--title--weight--large);
            line-height: var(--font--title--line-height--large);
            letter-spacing: var(--font--title--letter-spacing--large);
            text-transform: var(--font--title--casing--large);
        }

        & ul {
            list-style-type: none;
            /* font-size: var(--left-nav--outer--font--size); */

            & li {
                border-bottom: solid var(--size--border) var(--color--border);

                &.active {
                    background-color: var(--color--brand--highlight);
                }
                
                & a {
                    display: block;
                    padding: var(--space-s);
                    text-decoration: none;
                }
            }

            & ul {
                font-size: var(--left-nav--inner--font--size);
                text-transform: uppercase;

                & li {
                }
            }
        }
    }

    nav#nav-left {
        border-right: solid var(--size--border) var(--color--border);
    }
}