@use '@justeat/fozzie/src/scss/fozzie' as f;
/**
* Global Page Navigation
* =================================
* Styles relating to the global site navigation
*
*/

$nav-text-size                     : 'body-l';
$nav-text-weight                   : f.$font-weight-bold;
$nav-text-color                    : f.$color-content-link;
$nav-text-color--hover             : darken(f.$color-content-link, f.$color-hover-01);
$nav-text-color--transparent       : f.$color-content-link-inverse;

$nav-transition-duration           : 250ms;

$nav-trigger-width                 : 56px;
$nav-trigger-height                : 56px;
$nav-trigger-focus-bg              : f.$color-interactive-secondary;

$nav-popover-width                 : 300px;
$nav-popover-transition-delay      : 200ms;
$nav-popover-transition-duration   : 200ms;

$countrySelector-flag-width        : 21px;
$countrySelector-flag-height       : 21px;
$countrySelector-arrowIcon-height  : 18px;
$countrySelector-arrowIcon-width   : 18px;

$nav-featureLinkIcon-width         : 24px;
$nav-featureLinkIcon-height        : 24px;

$nav-icon-color                    : f.$color-interactive-primary;
$nav-icon-color--transparent       : f.$color-interactive-inverse;
$nav-icon-color--mobileWhiteBg     : f.$color-content-interactive-secondary;
$nav-icon-size                     : 24px;

$nav-toggleIcon-left               : f.spacing(d);
$nav-toggleIcon-width              : 21px;
$nav-toggleIcon-height             : 2px;
$nav-toggleIcon-borderRadius       : 1px;
$nav-toggleIcon-color              : $nav-icon-color;
$nav-toggleIcon-color--transparent : $nav-icon-color--transparent;
$nav-toggleIcon-bg                 : transparent;
$nav-toggleIcon-space              : 5px;

$nav-focus-borderRadius            : 800px;

$nav-container-border-color        : f.$color-border-subtle;
$nav-container-separator           : 1px;
$nav-container-height--narrow      : 56px;


@mixin nav-container-visible () {
    overflow-y: auto;
    left: 0;
    opacity: 1;
    z-index: f.zIndex(high);
    transition: opacity $nav-transition-duration ease-in-out,
        z-index 0s linear;
}

// Global site-wide navigation
.c-nav--global {
    @include f.media('>mid') {
        display: flex;
        justify-content: flex-end;
        flex-grow: 1;
    }
}

// we have a nav container so that we don’t have to make the inner list 100% height
// this is so we can position the logout button last on mobile
.c-nav-container {
    @include f.media('<=mid') {
        position: fixed;
        top: $nav-container-height--narrow;
        left: -99999px;
        width: 100%;
        padding: 0;
        height: calc(100% - (#{$nav-container-height--narrow}));
        border-top: $nav-container-separator solid $nav-container-border-color;
        background: f.$color-container-default;
        z-index: -1;
        opacity: 0;
        transition: opacity $nav-transition-duration ease-in-out,
            z-index 0s linear $nav-transition-duration,
            left 0s linear ($nav-popover-transition-delay + $nav-popover-transition-duration);

        &.is-visible {
            @include nav-container-visible();
        }
    }
}

.c-nav-list {
    position: relative;
}

.c-nav-list,
.c-nav-popoverList {
    margin-top: 0;
    margin-left: 0;
    list-style: none;
    list-style-image: none;
    padding: 0;

    & > li {
        margin-bottom: 0;

        &:before {
            content: none;
        }
    }

    @include f.media('<=mid') {
        display: flex;
        flex-direction: column;
    }
}

.c-nav-popoverList--twoColumns {
    @include f.media('>mid') {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

// Navigation Trigger
// This is the checkbox that controls the menu active state without JS via :checked
.c-nav-trigger {
    position: absolute;
    width: $nav-trigger-width;
    height: $nav-trigger-height;
    top: -100px;
    left: -100px;

    @include f.media('>mid') {
        display: none;
    }

    &:checked ~ .c-nav-container {
        @include f.media('<=mid') {
            @include nav-container-visible();
        }
    }

    &:focus ~ .c-nav-toggle {
        background-color: $nav-trigger-focus-bg;

        .c-header--transparent & {
            background-color: transparent;
        }
    }
}

.c-nav-list-link--alt {
    @include f.media('>mid') {
        color: $nav-text-color--transparent !important;
    }
}

.c-nav-list-link--transparent,
.c-nav-list-link--alt {
    color: $nav-text-color;
    @include f.media('>mid') {
        &:hover {
            color: $nav-text-color--transparent !important;
            text-decoration: underline;
        }
    }
}

.has-sublist {
    // ensures the dropdown/popover is relative to the hover element, on wider views
    @include f.media('>mid') {
        position: relative;
        cursor: pointer;
    }
}

.c-nav-popover {
    @include f.media('>mid') {
        min-width: $nav-popover-width;
        position: absolute;
        top: 100%;
        right: 99999px; // offscreen, so can’t ever be hovered over by default
        opacity: 0;
        z-index: -1;
        padding: 0;

        transition: opacity $nav-popover-transition-duration ease-in-out $nav-popover-transition-delay,
                    z-index 0s linear ($nav-popover-transition-delay + $nav-popover-transition-duration),
                    right 0s linear ($nav-popover-transition-delay + $nav-popover-transition-duration);

        // display the popover when our parent item is hovered(recieved class .open)
        .has-sublist.is-open & {
            opacity: 1;
            z-index: f.zIndex(high);
            right: 0;

            transition: opacity $nav-popover-transition-duration ease-in-out,
                        z-index 0s linear;
        }

        // tooltip arrow
        &:before {
            right: 10%;
        }
    }
}

.c-nav-popover.c-nav-popover--countrySelector {
    @include f.media('>mid') {
        margin-top: f.spacing(d);
    }
    // tooltip arrow
    &:before {
        right: 4%;
    }
}
