/*

In this file:

// A. Modules
// B. Mixins
// C. Components

*/

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

@use 'sass:map';
@use './breakpoint';
@use './caret';
@use './link';

////////////////////////////////////////
// B. Mixins
////////////////////////////////////////

// Used by _navigation.scss (.nav--divider) and _main-menu.scss (.main-menu__nav)
// to style .dropdown-link-split

@mixin split-mobile {
    padding: unset;
    gap: unset;

    > .text {
        flex: 1;
        padding: var(--nav-divider-padding-y) var(--nav-divider-padding-x);
    }

    > [data-toggle="dropdown"] {
        height: calc(1lh + (var(--nav-divider-padding-y) * 2));
        aspect-ratio: 1;
        background-color: var(--subtle-fill-1);
    }
}

@mixin split-desktop {
    gap: 0.375rem;

    > .text {
        flex: unset;
        padding: unset;
    }

    > [data-toggle="dropdown"] {
        height: unset;
        background-color: unset;
        
        --focus-outline-offset: calc(var(--focus-outline-width) * 1.5);
    }
}

////////////////////////////////////////
// C. Components
////////////////////////////////////////

@layer component {

    // Dropdown Components

    .dropdown,
    .dropdown-link-split {
        position: relative;

        display: flex;
        align-items: center;

        gap: 0.375rem;

        width: 100%;

        z-index: auto;

        &:is(
            [aria-expanded="true"],
            :has([aria-expanded="true"])
        ) .text {
            text-decoration: underline;
        }
    }

    .dropdown:is(:hover, :focus) .text,
    .dropdown-link-split:has(.text:is(:hover, :focus)) .text {
        text-decoration: underline;
    }

    .dropdown:not([data-indicator]),
    .dropdown-link-split > [data-toggle="dropdown"]:not([data-indicator]) {
        @extend %caret;
    }

    .dropdown[data-indicator]::after,
    .dropdown-link-split > [data-toggle="dropdown"][data-indicator]::after {
        content: attr(data-indicator);
        font-family: var(--icon-font-family);
        font-size: 0.75em;
        display: flex;
        pointer-events: none;
    }

    .dropdown-link-split {

        > .text {
            @extend .link-expanded;
        }

        > [data-toggle="dropdown"] {
            position: relative;
            z-index: 2;

            display: flex;
            align-items: center;
            justify-content: center;
        }

    }

    [data-toggle="dropdown"]:not([data-indicator])[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    [data-toggle="dropdown"][data-indicator][aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
    
    // Nav Dropdown Panel

    .dropdown__menu {
        --_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);
        }

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

    // Mega Menu

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

        text-align: start;

        display: block;

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

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

            display: none;
        }

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

            position: absolute;

            width: 100dvw;
            height: 100dvh;

            max-width: var(--body-max-width);

            z-index: -2;

            pointer-events: none;

            background-color: hsla(0, 0%, 0%, 0.75);

            display: none;
        }

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

            pointer-events: none;
        }
    }

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

            .mega-menu#{$mod} {
                position: absolute;
                &::before,
                &::after {
                    display: block;
                }
            }

        }
    }

} // end @layer