/*

In this file:

// A. Modules
// B. Variables
// C. Placeholders
// D. Nav Component
// E. Nav Divider Modifier
// F. Nav Has Icons Modifier
// G. (Breadcrumb moved to _breadcrumb.scss)

*/

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

@use 'sass:map';
@use './breakpoint';
@use './dropdown';

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

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

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

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

    --nav-font-family: var(--font-family-sans-serif);
}

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

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

    line-height: normal;

    font-family: var(--nav-font-family);

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

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

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

    > li > :is(a, button):not(:has([class*="icon"])):is([aria-selected="true"], [aria-current]) {
        text-decoration-line: underline;
    }
}

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

@layer component {

    // Nav Component

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

    .nav li > :is(a, button):has([class*="icon"]) {
        display: flex;
        align-items: center;

        gap: 0.375em;

        &:is(:hover, :focus) {
            [class*="text"] {
                text-decoration: underline;
            }
        }
    }

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

        gap: var(--nav-gap);

        &[class*="gap-"] {
            --nav-gap: var(--gap-size);
        }

        > li > :is(a, button):has([class*="icon"]) {
            width: fit-content;
        }

        > li > .dropdown__menu {
            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: stretch;

                > li {
                    display: flex;
                    align-items: center;
                }

                > li > .dropdown__menu {
                    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: flex;

            width: 100%;
        }

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

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

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

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

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

    @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 !important;

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

                > li > :is(a, button, .dropdown, .dropdown-link-split) {
                    justify-content: center;
                }

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

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

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

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

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

                    width: 100%;
                }

                // For <ul> tags with borders applied

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

} // end @layer