/*

In this file:

// A. Modules
// B. Variables
// C. Placeholders 
// D. Nav Component 
// F. Nav Divider Modifier
// G. Nav Has Icons Modifier
// H. Nav Breadcrumb Component
// I. Nav Dropdown Elements 
// J. Primary Nav Components

*/

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

@use 'sass:map';
@use './breakpoint';
@use './spacing';
@use './collapse';
@use './button';
@use './link';
@use './typography';

////////////////////////////////////////
// C. Placeholder
////////////////////////////////////////

%caret {
    --_caret-size: 0.25em;
    --_caret-margin: 0.375em;

    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    
    &::before {
        border-top: var(--_caret-size) solid;
        border-right: var(--_caret-size) solid transparent;
        border-bottom: 0;
        border-left: var(--_caret-size) solid transparent;

        position: relative;
        content: "";
        
        display: inline-flex;
        
        margin-inline-start: var(--_caret-margin);
        
        color: inherit;
        
        pointer-events: none;
    }
}

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

:root {
    --nav-gap: 0.875em;

    --nav-divider-padding-x: var(--container-padding-x);

    --nav-divider-padding-y: 0.625em;

    --primary-nav-padding-x: var(--container-padding-x);
    
    --primary-nav-padding-y: var(--spacer-2);
}

////////////////////////////////////////
// C. Placeholders 
////////////////////////////////////////

%list-style-nav {
    list-style: none;

    line-height: normal;

    > li:has([class*="nav__dropdown"]) {
        position: relative;
    }

    > li > :is(
        a, 
        button
    ):not(
        [class*="button"], 
        :has([class*="icon"])
    ) {
        &:hover,
        &:focus {
            text-decoration: underline;
        }
    }

    :is([aria-current], [aria-selected="true"]) {
        font-weight: var(--font-weight-bold);
    }

    &:not([class*="nav--has-icons"]) :is([aria-selected="true"], [aria-current]) {
        text-decoration-line: underline;
    }
}

////////////////////////////////////////
// D. Components
////////////////////////////////////////

@layer component {

    // Nav

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

    .nav:not([class*="nav--divider"]):not([class*="nav--breadcrumb"]) {
        display: flex;
        flex-direction: column;

        gap: var(--nav-gap);

        > li > .nav__dropdown {
            inset-inline-start: 0;
            
            min-width: 200px;
            width: calc(100% + (var(--nav-gap) * 2));
            
            margin-inline-start: calc(var(--nav-gap) * -1);
            margin-inline-end: calc(var(--nav-gap) * -1);

            padding: var(--nav-gap);
        }
    }

    @each $breakpoint in map.keys(breakpoint.$breakpoints) {
        @include breakpoint.breakpoint-up($breakpoint) {
            $mod: breakpoint.breakpoint-modifier($breakpoint, breakpoint.$breakpoints);

            .nav:not([class*="nav--divider"]).nav--horizontal#{$mod} {
                flex-direction: row;
                align-items: center;

                > li > .nav__dropdown {
                    position: absolute;
                }

                > li > [data-toggle="dropdown"][class*="-icon"] ~ ul {
                    left: 50%;

                    transform: translateX(-50%);
                    
                    margin-inline-start: 0;

                    &::after {
                        left: 50%;
                    }
                }
            }

        }
    }

    // Nav Divider Modifier

    .nav--divider {

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

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

            display: block;

            width: 100%;
        }

        > li > :is(a, button, .nav__dropdown) {
            padding: var(--nav-divider-padding-y) var(--nav-divider-padding-x);
        }

        > li > .nav__dropdown {
            border-block-start-width: 0 !important;
        }

        > li > a > * {
            margin-block: auto;
        }

        [data-toggle="dropdown"] {
            justify-content: space-between;
        }
    }

    @each $breakpoint in map.keys(breakpoint.$breakpoints) {
        @include breakpoint.breakpoint-up($breakpoint) {
            $mod: breakpoint.breakpoint-modifier($breakpoint, breakpoint.$breakpoints);

            .nav--divider.nav--horizontal#{$mod} {
                display: flex;
                align-items: stretch;

                > li {
                    border-block-end-style: unset;

                    display: flex;
                    align-items: stretch;
                    flex: 1 1 100%;
                }

                > li > :is(a, button) {
                    display: flex;
                    justify-content: center;
                }
                
                > li:not(:last-child) {
                    border-inline-end-width: var(--border-width);
                    border-inline-end-style: var(--border-style);
                }

                &[class*="border"] {
                    > li > .nav__dropdown {
                        border-block-start-width: 0;
                        border-width: var(--border-width);
                        border-style: var(--border-style);

                        width: calc(100% + (var(--border-width) * 2));
                    }
                }

                .nav__dropdown {
                    position: absolute;
                    inset-inline-start: 0;

                    width: 100%;
                }

                // For <ul> tags with borders applied

                &[class*="border"] .nav__dropdown {
                    margin-inline-start: calc(var(--border-width) * -1);
                }
            }
        }
    }

    // Nav Has Icons Modifier

    [class*="nav--has-icons"] {

        &:not([class*="nav--divider"]) {
            > li > :is(a, button) {
                width: fit-content;
            }
        }

        > li > :is(a, button) {
            display: flex;
            align-items: center;

            gap:0.375em;

            &:is(:hover, :focus) {
                .nav__text {
                    text-decoration: underline;
                }
            }
        }
    }

    // Nav Breadcrumb Component

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

        --breadcrumb-font-size: var(--font-size-md);

        display: flex;
        align-items: center;

        font-size: var(--breadcrumb-font-size);

        > li:last-child {
            font-style: italic;
            font-weight: bold;
        }
        
        > li:not(:last-child) {
            
            @extend %caret;
            
            &::before {
                margin-inline: var(--nav-gap) !important;

                transform: rotate(-90deg);

                [dir="rtl"] & {
                    transform: rotate(90deg);
                }

            }
        }
    }

    // Nav Dropdown Elements

    [data-toggle="dropdown"]:not([class*="button--icon-only"]) {    
        @extend %caret;

        &[aria-expanded="true"]{
            text-decoration: underline;
        }

        &[aria-expanded="true"]::before {
            transform: rotate(180deg);
        }
    }

    [data-toggle="dropdown"][class*="-icon"] ~ ul {
        --_dropdown-pointer-size: 0.75rem;

        position: relative;

        margin-top: 50px;
        overflow: visible;

        &::after {
            position: absolute;
            content: "";
            top: 0;
            inset-inline-start: calc(var(--nav-gap) + var(--_dropdown-pointer-size) + 4px);
            
            transform: translateX(-50%) rotate(45deg);

            width:  var(--_dropdown-pointer-size);
            height:  var(--_dropdown-pointer-size);
            
            margin-top: calc( var(--_dropdown-pointer-size) * -0.5 - var(--border-width) );

            background-color: inherit;

            border-color: inherit;
            border-inline-start-width: inherit;
            border-inline-start-style: inherit;
            border-block-start-width: inherit;
            border-block-start-style: inherit;
        }
    }

    .nav__dropdown {
        --_dropdown-z-index: 1200;

        position: static;

        inset-block-start: 100%;

        width: 100%;

        z-index: var(--_dropdown-z-index);

        font-size: var(--font-size-md);

        font-weight: normal;

        text-align: start;

        display: none;

        &.shown {
            display: block;
        }

        > li:not(:last-child) {
            margin-bottom: var(--nav-gap);
        }
    }

    // Primary Nav Components

    [class*="primary-nav--"] {
        position: relative;
        
        display: grid;

        align-items: stretch;

        z-index: 10000;

        ul {
            @extend %list-style-nav;
            width: 100%;
        }

        li:has([class*="nav__dropdown"]) {
            position: relative;
        }

        [class*="__logo"],
        [class*="__menu"],
        [class*="__toggle"],
        [class*="__search"],
        [class*="__actions"] {
            display: flex;
            align-items: center;
        }

        [class*="__toggle"],
        [class*="__actions"],
        [class*="__search"] {
            font-size: var(--font-size-md);
        }

        [class*="__logo"] {
            grid-area: logo;
        }

        [class*="__menu"] {
            grid-area: menu;

            @extend .collapse;

            border: var(--border-width);
            border-block-start-style: var(--border-style);
            border-block-start-color: inherit;
        }

        [class*="__toggle"] {
            grid-area: toggle;
            
            justify-content: center;

            gap: var(--primary-nav-padding-x);
        }

        [class*="__search"] {
            grid-area: search;

            display: flex;
            align-items: center;

            .form-entry:not([class*="active"]) .form-entry__field__input::after {
                display: none;
            }

            .form-entry__field {
                border-radius: var(--button-border-radius);
            }
        }

        > [class*="__actions"] {
            grid-area: button;
        }
    }

    [class*="primary-nav--inline--"] {
        --_template-area-row-1-m: "logo toggle button";
        --_template-area-row-2-m: "menu menu menu";
        --_template-area-row-3-m: "search search search";

        --_template-area-row-1-d: "logo menu search button";

        &:has([class*="__search"]):not(:has([class*="__actions"])) {
            --_template-area-row-1-m: "logo toggle button";
            --_template-area-row-1-d: "logo menu search";
        }
        
        &:has([class*="__actions"]):not(:has([class*="__search"])) {
            --_template-area-row-1-m: "logo toggle button";
            --_template-area-row-1-d: "logo menu button";
        }

        &:not(:has([class*="__search"])),
        &:not(:has([class*="__actions"])) {
            --_template-area-row-1-d: "logo . menu";
        }

        grid-template-columns: 1fr auto auto;

        grid-template-areas:
            var(--_template-area-row-1-m)
            var(--_template-area-row-2-m)
            var(--_template-area-row-3-m)
        ;

        [class*="__menu"] {
            align-self: stretch; 
            justify-content: end;
        }

        [class*="__logo"] a {
            margin-inline-start : var(--primary-nav-padding-x);
        } 
       
        :is(
            [class*="__actions"], 
            [class*="__toggle"]
        ) {
            margin-inline-end: var(--primary-nav-padding-x);
        } 

        :is(
            [class*="__logo"] a,
            [class*="__action"],
            [class*="__toggle"]
        ) {
            margin-block: var(--primary-nav-padding-y);
        }

        [class*="__search"] {
            @extend .collapse;

            padding: var(--nav-gap);

            border-block-start-width: var(--border-width);
            border-block-start-style: var(--border-style);
            border-block-start-color: inherit;
        }
    }

    [class*="primary-nav--below--"] {
        --_template-area-row-1-m: "logo logo logo";
        --_template-area-row-2-m: "toggle search button";
        --_template-area-row-3-m: "menu menu menu";

        --_template-area-row-1-d: "logo search button";
        --_template-area-row-2-d: "menu menu menu";

        column-gap: var(--primary-nav-padding-x);

        &:has([class*="__search"]):not(:has([class*="__actions"])) {
            --_template-area-row-2-m: "toggle search search";
            --_template-area-row-1-d: "logo logo search";
        }

        [class*="__logo"] a,
        [class*="__toggle"] {
            margin-inline-start : var(--primary-nav-padding-x);
        } 

        > :is([class*="__search"], [class*="__actions"]):last-child {
            margin-inline-end : var(--primary-nav-padding-x);
        }

        [class*="__logo"] a,
        [class*="__toggle"],
        [class*="__search"],
        [class*="__actions"] {
            margin-block : var(--primary-nav-padding-y);
        } 
        
        &:has([class*="__actions"]):not(:has([class*="__search"])) {
            --_template-area-row-2-m: "toggle . button";
            --_template-area-row-1-d: "logo logo button";
        }

        &:not(:has([class*="__search"])),
        &:not(:has([class*="__actions"])) {
            --_template-area-row-2-m: "toggle toggle toggle";
            --_template-area-row-1-d: "logo logo logo";
        }

        grid-template-columns: auto 1fr auto;

        grid-template-areas:
            var(--_template-area-row-1-m)
            var(--_template-area-row-2-m)
            var(--_template-area-row-3-m)
        ;

        [class*="__logo"] {
            justify-content: center;
            border-block-end-width: var(--border-width);
            border-block-end-style: var(--border-style);
            border-block-end-color: inherit;         
        }
    }

    .primary-nav__menu {
    
        > ul > li:not(:last-child) {
            border-block-end-width: var(--border-width);
            border-block-end-style: var(--border-style);
            border-block-end-color: inherit;
        }

        > ul > li > :is(a, button) {
            display: flex;
            justify-content: space-between;

            width: 100%;
            
            padding: var(--nav-divider-padding-y) var(--primary-nav-padding-x);
        }

        > ul > li:not(:has([class*="mega-menu"])) {
            position: relative;
        }

        > ul > li > a {
            @extend .link-expanded !optional;
        }

        .nav__dropdown {
            padding: var(--primary-nav-padding-y) var(--primary-nav-padding-x);
        }
    }

    .primary-nav__search {
        .form-entry {
            width: 100%;
        }

        .form-entry__field {
            border: var(--border-width);
            border-style: var(--border-style);
        }
    }

    @each $breakpoint in map.keys(breakpoint.$breakpoints) {
        @include breakpoint.breakpoint-up($breakpoint) {
            $mod: breakpoint.breakpoint-modifier($breakpoint, breakpoint.$breakpoints);

            .primary-nav--inline#{$mod},
            .primary-nav--below#{$mod} {

                [class*="__logo"] {
                    justify-content: flex-start;
                }

                [class*="__toggle"] {
                    display: none;
                }

                :is(
                    [class*="__menu"],
                    [class*="__search"]
                ) {
                    display: flex !important;
                }

                [class*="__search"] {
                    padding: unset;
                }

                [class*="__menu"] > ul > li {
                    border-block-end: unset;
                }

            }

            .primary-nav--inline#{$mod} {
                grid-template-columns: 1fr auto auto;
                grid-template-areas: var(--_template-area-row-1-d);

                :is(
                    [class*="__menu"],
                    [class*="__search"]
                ) {
                    border-block-start-style: none !important;
                    margin-inline-end: var(--primary-nav-padding-x);
                }
                
                [class*="__menu"] {
                    justify-content: flex-end;
                    align-items: center;

                    padding: unset;
                
                    > ul {
                        height: 100%;
                    }

                    > ul > li > :is(a, button) {
                        padding: unset;
                    }

                    [data-trigger="hover"] {
                        position: relative;

                        &[aria-expanded="true"]::after {
                            content: "";
                            position: absolute;
                            inset: 0;
                            width: 100%;
                            height: 250%;
                        }
                    }

                    > ul {
                        display: flex;
                        align-items: stretch;

                        > li {
                            display: flex;

                            margin-inline-start: var(--nav-gap);
                            margin-inline-end: var(--nav-gap);
                        }

                        > li > .nav__dropdown {
                            position: absolute;

                            min-width: 200px;
                            padding: var(--nav-gap);
                            margin-inline-start: calc(var(--nav-gap) * -1);
                            margin-inline-end: calc(var(--nav-gap) * -1);
                        }

                        > li > a,
                        > li > button {
                            margin-block: auto;
                        }
                    }

                }
            }

            .primary-nav--below#{$mod} {
                grid-template-columns: 1fr auto auto;

                grid-template-areas:
                    var(--_template-area-row-1-d)
                    var(--_template-area-row-2-d);

                > [class*="__logo"] {
                    border-block-end-style: none !important;
                }

                > [class*="__menu"] {
                    padding: unset;

                    > ul {
                        display: flex;
                        align-items: stretch;
                            
                        > li {
                            flex-grow: 1;
                            
                            border-block-end-style: none !important;
                            
                            text-align: center;
                        }

                        > li > button {
                            width: 100%;
                        }

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

                        > li > a {
                            display: block;

                            padding: var(--nav-divider-padding-y) var(--nav-divider-padding-x);
                            
                            text-align: center;
                        }

                        [data-toggle="dropdown"] {
                            justify-content: center;
                        }

                        .nav__dropdown {
                            position: absolute;

                            width: 100%;
                            
                            inset-inline-start: 0;
                        }
                    }   
                }
            }
        }
    }

    // Mega Menu

    [class*="mega-menu"] {
        inset-block-start: 100%;
        inset-inline: 0;
        
        text-align: start;

        z-index: 1000;
        
        display: block;

        &:not(.shown) {
            display: none;
        }

        &::before, 
        &::after {
            content: "";
            position: absolute;
            inset: 0;
        }

        &::before {
            inset-inline-start: 50%;
            transform: translateX(-50%);

            width: 100vw;
            height: 100vh;
            
            z-index: -2;
            
            pointer-events: none;

            background-color: hsla(0, 0%, 0%, 0.5);
        }

        &::after {
            background-color: var(--background-color);
            z-index: -1;
        }
    }

    @each $breakpoint in map.keys(breakpoint.$breakpoints) {
        @include breakpoint.breakpoint-up($breakpoint) {
            $mod: breakpoint.breakpoint-modifier($breakpoint, breakpoint.$breakpoints);

            .mega-menu#{$mod} {
                position: absolute;
            }

        }
    }

} // end @layer