/*

In this file:

// A. Modules
// B. Variables
// C. Main Menu Base
// D. Main Menu Bar Variant
// E. Main Menu Stack Variant
// F. Main Menu Menu + Search
// G. Breakpoint Overrides

*/

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

@use 'sass:map';
@use './breakpoint';
@use './collapse';
@use './dropdown';
@use './link';
@use './navigation';

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

:root {
    --main-menu-padding-x: var(--container-padding-x);

    --main-menu-padding-y: var(--spacer-2);

    --main-menu-search-width: 300px;
}

// Mixin for hover safe zone

@mixin hover-safe-zone {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 250%; // Arbitrary Height
}

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

@layer component {

    // Main Menu Components

    [class*="main-menu--"] {
        position: relative;

        display: grid;

        align-items: stretch;

        z-index: 1000;

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

        ul {
            @extend %list-style-nav;

            width: 100%;
        }

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

        [class*="__logo"],
        [class*="__nav"],
        [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*="__nav"] {
            grid-area: menu;

            @extend .collapse;

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

            > ul > li > :is(a, button) {
                user-select: none;
            }
        }

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

            justify-content: center;

            gap: var(--main-menu-padding-x);
        }

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

            display: flex;
            align-items: center;
        }

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

    // Main Menu Bar Variant

    [class*="main-menu--bar--"] {
        --_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*="__nav"] {
            align-self: stretch;
        }


        [class*="__logo"] a {
            margin-inline-start : var(--main-menu-padding-x);
        }

        :is(
            [class*="__actions"],
            [class*="__toggle"]
        ) {
            margin-inline-end: var(--main-menu-padding-x);
        }

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

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

            border-block-start: var(--border-width) var(--border-style) var(--border-color);
            
            > * {
                padding-inline: var(--main-menu-padding-x);
                padding-block: var(--main-menu-padding-y);
            }

        }
    }

    // Main Menu Stack Variant

    [class*="main-menu--stack--"] {
        --_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(--main-menu-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(--main-menu-padding-x);
        }

        > [class*="__actions"] {
            margin-inline-end: var(--main-menu-padding-x);
        }

        &:not(:has([class*="__actions"])) > [class*="__search"] {
            margin-inline-end: var(--main-menu-padding-x);
        }

        [class*="__logo"] a,
        [class*="__toggle"],
        [class*="__search"],
        [class*="__actions"] {
            margin-block : var(--main-menu-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;
        }
    }

    // Main Menu Nav

    .main-menu__nav {

        > 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) {
            position: relative;

            display: flex;

            width: 100%;
        }

        > ul > li > :is(a, button, .dropdown, .dropdown-link-split) {
            display: flex;
            padding: var(--nav-divider-padding-y) var(--nav-divider-padding-x);
        }

        > ul > li > :is(.dropdown, .dropdown-link-split) {
            justify-content: space-between;
        }

        > ul > li > .dropdown-link-split {
            @include dropdown.split-mobile;
        }

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

        .dropdown__menu {
            padding: var(--main-menu-padding-y) var(--main-menu-padding-x);
        }
    }

    .main-menu__search {
        .form-entry {
            width: 100%;
        }

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

    // Breakpoint Modifiers

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

            .main-menu--bar#{$mod},
            .main-menu--stack#{$mod} {

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

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

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

                [class*="__search"] {
                    width: var(--main-menu-search-width);
                }

                [class*="__search"],
                [class*="__nav"], 
                [class*="__nav"] > ul {
                    opacity: 1 !important;
                    overflow: unset !important;
                    height: auto !important;
                    transition: none !important;
                }

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

                [class*="__nav"] > ul > li > .dropdown-link-split {
                    @include dropdown.split-desktop;
                }

            }

            .main-menu--bar#{$mod} {
                grid-template-columns: 1fr auto auto;
                grid-template-areas: var(--_template-area-row-1-d);

                :is(
                    [class*="__nav"],
                    [class*="__search"]
                ) {
                    border-block-start-style: none !important;
                    margin-inline-end: var(--main-menu-padding-x);
                }

                [class*="__nav"] {
                    justify-content: flex-end;
                    align-items: center;

                    width: 100%;

                    padding: unset;

                    > ul {
                        align-self: stretch;
                    }

                    ul > li > :is(a, button, .dropdown, .dropdown-link-split) {
                        padding: unset;
                    }

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

                        > li {
                            display: flex;

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

                        > li > .dropdown__menu {
                            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 > :is(a, button, .dropdown-link-split) {
                            margin-block: auto;
                        }
                    }

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

                        &[aria-expanded="true"]::before {
                            @include hover-safe-zone;
                        }
                    }

                    .dropdown-link-split:has([aria-expanded="true"]) {
                        &::before {
                            @include hover-safe-zone;
                        }
                    }
                }

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

            .main-menu--stack#{$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: unset;
                }

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

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

                        > li {
                            flex-grow: 1;

                            border-block-end-style: unset;

                            text-align: center;
                        }

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

                        > li > :is(a, button, .dropdown, .dropdown-link-split) {
                            display: flex;
                            justify-content: center;
                            padding: var(--nav-divider-padding-y) var(--nav-divider-padding-x);
                        }

                        .dropdown__menu {
                            position: absolute;

                            width: 100%;

                            inset-inline-start: 0;
                        }
                    }
                }
            }
        }
    }

} // end @layer