/*

In this file:

// A. Modules
// B. Variables
// C. Nested Nav Component

*/

////////////////////////////////////////
// A. Modules
////////////////////////////////////////

@use './navigation';

////////////////////////////////////////
// B. Variables
////////////////////////////////////////

:root {
    --nav-nested-padding-x: var(--nav-divider-padding-x);
    --nav-nested-padding-y: 0.5em;

    --nav-nested-parent-font-size: var(--font-size-md);
    --nav-nested-child-font-size: var(--font-size-sm);
    
    --nav-nested-indicator-width: 3px;
    --nav-nested-indicator-color: currentColor;
}

////////////////////////////////////////
// C. Nested Nav Component
////////////////////////////////////////

@layer component {

    .nested-nav {
        @extend %list-style-nav;

        border: var(--border-width) var(--border-style) var(--border-color);

        // All levels: full-width block links with hover background

        :is(a, button) {
            display: block;
            width: 100%;

            padding-block: var(--nav-nested-padding-y);
            padding-inline-start: var(--nav-nested-padding-x);

            font-size: var(--nav-nested-parent-font-size);

            transition: background-color 0.15s ease;

            &:is(:hover, :focus) {
                background-color: var(--subtle-fill-1);
            }
        }

        // Any link that has child items gets a border under it

        li:has(> ul) > :is(a, button) {
            border-block-end: var(--border-width) var(--border-style) var(--border-color);
        }

        // L1: border between items (not last)

        > li:not(:last-child) {
            border-block-end: var(--border-width) var(--border-style) var(--border-color);
        }

        // L1 only: active indicator bar

        > li > :is(a, button) {
            position: relative;

            &::before {
                content: "";
                position: absolute;
                inset-block-start: 0;
                inset-block-end: 0;
                inset-inline-start: 0;

                width: var(--nav-nested-indicator-width);

                background-color: var(--nav-nested-indicator-color);

                opacity: 0;
            }

            &:is([aria-current], [aria-selected="true"])::before {
                opacity: 1;
            }
        }

        // L2 and L3: indent via padding, smaller font, borders between items

        li > ul {
            @extend %list-style-nav;

            :is(a, button) {
                padding-inline-start: calc(var(--nav-nested-padding-x) * 2);
                font-size: var(--nav-nested-child-font-size);
            }

            li > ul :is(a, button) {
                padding-inline-start: calc(var(--nav-nested-padding-x) * 3);
            }

            li:not(:last-child) {
                border-block-end: var(--border-width) var(--border-style) var(--border-color);
            }
        }
    }

} // end @layer