media/css/m24/components/navigation-refresh.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../vars/lib' as *;

$margin-top: 54px; // top margin offset for mobile navigation menu

@keyframes nav-slide-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes nav-slide-in-reverse {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.m24-navigation-refresh {
    background-color: $color-white;
    border-bottom: $border-width solid $m24-color-light-mid-gray;
    display: flex;
    width: 100%;

    @media #{$mq-md} {
        display: block;
    }
}

// * -------------------------------------------------------------------------- */
// Sticky navigation styles
@supports (position: sticky) {
    html.mzp-has-sticky-navigation {
        .m24-navigation-refresh.m24-mzp-is-sticky {
            position: sticky;
            z-index: 1000;
            left: 0;
            top: 0;
            @include transition(transform 300ms ease-in-out, box-shadow 300ms ease-in-out);

            &.mzp-is-scrolling {
                // Shadow colors are equivalent to $color-ink-90, $color-blue-90, $color-ink-90
                // We can't use a $box-shadow token here because it needs a different size and offset
                box-shadow: 0 0 6px 1px rgba(29, 17, 51, 0.04), 0 0 8px $border-width rgba(9, 32, 77, 0.12), 0 0 5px -3px rgba(29, 17, 51, 0.12);
            }

            &.mzp-is-hidden {
                @include transform(translate(0, -110%));
            }

            @media (prefers-reduced-motion: reduce) {
                position: static;
            }
        }
    }
}

// Common navigation styles
.m24-c-navigation-l-content {
    display: flex;
    padding: $spacer-xs $spacer-md;
    position: relative;
    width: 100%;

    @media #{$mq-md} {
        display: block;
        padding: $spacer-sm 0 0;
        width: auto;
    }
}

.m24-c-navigation-container {
    margin: 0 auto;
    max-width: $content-max;
    padding: 0;
    position: relative;
    width: 100%;

    @media #{$mq-md} {
        align-items: start;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: static;
        padding: 0 $container-padding;
        box-sizing: border-box;
    }
}

// Mobile navigation menu button.
.m24-c-navigation-menu-button {
    display: none;
}

.js .m24-c-navigation-menu-button {
    background-color: transparent;
    border: none;
    color: $color-black;
    display: block;
    float: right;
    font-weight: 600;
    height: 32px;
    margin: 4px 0 0;
    padding: 0;
    position: relative;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;

    &.mzp-is-active {
        background: transparent url('/media/protocol/img/icons/close.svg') center center no-repeat;
        width: 40px;
        @include image-replaced;

        &::after {
            content: none;
        }
    }

    @media #{$mq-md} {
        display: none;
        margin: 24px 0;
    }
}

[dir='rtl'].js .m24-c-navigation-menu-button {
    float: left;
}

.m24-c-navigation-logo-link {
    display: inline-block;
}

.m24-c-navigation-logo-image {
    height: 27px;
    width: auto;
    padding-top: $spacing-xs;

    @media #{$mq-md} {
        height: 24px;
        padding: 0;
    }
}

.spacer-gif {
    display: inline-block;
    width: 100px;
}

// Mobile navigation menu with JS enabled.
.js .m24-c-navigation-items {
    display: none;

    @media (max-width: $screen-md) {
        &.mzp-is-open {
            display: flex;
            height: calc(100vh - $margin-top);
            margin-top: $margin-top;
            overflow: hidden auto;
            padding-top: 0;
            position: fixed;
            right: 0;
            top: 0;
            width: 100%;
            z-index: 100;
            @include bidi(((animation, nav-slide-in 0.45s ease, nav-slide-in-reverse 0.45s ease),));

            @media (prefers-reduced-motion: reduce) {
                @include bidi(((animation, none, none),));
            }

            .m24-c-menu-category-list:has(.m24-c-menu-category.mzp-is-selected) {
                margin-bottom: 0;

                .m24-c-menu-category:not(.mzp-is-selected) {
                    display: none;
                }
            }
        }
    }

    @media #{$mq-md} {
        display: block;
    }
}

.m24-c-navigation-menu {
    margin-bottom: 0;
    width: 100%;

    @media #{$mq-md} {
        border-top: transparent;
        width: auto;
    }
}

// Basic hover interactions with JavaScript disabled or not supported.
.m24-c-menu.m24-mzp-is-basic .m24-c-menu-category {
    @media #{$mq-md} {
        &.mzp-has-drop-down:hover,
        &.mzp-has-drop-down:focus {
            .m24-c-menu-panel {
                display: block;
            }
        }

        &.mzp-has-drop-down:focus-within {
            .m24-c-menu-panel {
                display: block;
            }
        }
    }
}

// Enhanced hover interactions with JavaScript enabled.
.m24-c-menu.m24-mzp-is-enhanced .m24-c-menu-category {
    &.mzp-is-selected {
        border-bottom: transparent;

        .m24-c-menu-title {
            @include bidi(((padding-left, $spacing-md, padding-right, $spacing-md),));

            &::before {
                content: '/';
                padding: 0 $spacing-xs;
            }
        }

        .m24-c-menu-panel {
            display: block;
            @include bidi(((animation, nav-slide-in 450ms ease, nav-slide-in-reverse 450ms ease),));

            @media (prefers-reduced-motion: reduce) {
                @include bidi(((animation, none, none),));
            }
        }
    }

    // Arrow styles for mobile menu items.
    &::after {
        background: transparent url('/media/img/icons/m24-small/up-arrow.svg') center center no-repeat;
        content: '';
        height: 20px;
        position: absolute;
        top: 8px;
        width: 20px;
        @include bidi((
            (transform, rotate(90deg), rotate(-90deg)),
            (right, 8px, left, auto),
        ));
        @include background-size(16px, 16px);
    }

    &.mzp-is-selected::after {
        @include bidi((
            (transform, rotate(-90deg), rotate(90deg)),
            (left, 8px, right, auto),
        ));
    }

    @media #{$mq-md} {
        &.mzp-is-selected {
            .m24-c-menu-button-close {
                display: block;
            }

            .m24-c-menu-title {
                color: $m24-color-dark-green;
                @include bidi(((padding-left, 0, padding-right, 0),));

                &::before {
                    content: none;
                    display: none;
                }
            }

            &::after {
                background: $m24-color-dark-green;
            }

            .m24-c-menu-panel {
                @include bidi(((animation, none, none),));
            }
        }

        &::after {
            display: none;
        }
    }
}

.m24-c-menu-category-list {
    padding: 0;
    margin-bottom: 0;
    position: relative;

    @media #{$mq-md} {
        position: static;
        display: flex;
        justify-content: space-between;
    }
}

.m24-c-menu-category {
    border-bottom: $border-width solid $token-color-light-gray;
    border-top: none;
    padding: 8px 16px;
    position: relative;
    width: calc(100% - 32px);
    z-index: 1000;

    @media #{$mq-md} {
        border-bottom: transparent;
        padding: 0 $spacer-md $spacer-sm;
        position: static;
        width: auto;
    }

    &.m24-c-menu-category-has-icon {
        .m24-c-menu-title-icon {
            @include bidi(((margin, 0 8px 0 0, 0 0 0 8px),));
        }

        .m24-c-menu-title {
            @media #{$mq-md} {
                &:hover::after {
                    bottom: 1px;
                    width: calc(100% - 24px);
                    @include bidi(((left, 24px, right, auto),));
                }
            }
        }
    }
}

.m24-c-menu-title {
    align-items: center;
    border: none;
    color: $color-black;
    display: flex;
    font-size: $text-body-md;
    font-weight: 600;
    padding: 0;
    position: relative;
    text-decoration: none;
    width: 100%;

    // extra specificity to override link colors on some Firefox pages
    &:link,
    &:visited {
        color: $color-black;
        text-decoration: none;
    }

    &:hover:is(a) {
        color: $color-black;
    }

    .m24-c-menu-title-icon {
        @include bidi(((margin, 0 8px 0 0, 0 0 0 8px),));
    }

    @media #{$mq-md} {
        &:hover::after {
            background: $color-black;
            bottom: 1px;
            content: "";
            display: block;
            height: 1px;
            left: 0;
            position: absolute;
            width: 100%;
        }
    }
}

.m24-c-menu-panel {
    background-color: $color-white;
    color: $color-black;
    height: auto;
    overflow: hidden auto;
    width: 100%;
    z-index: 1000;
    @include border-box;

    @media #{$mq-md} {
        border: $border-width solid $m24-color-light-mid-gray;
        border-top: $border-width solid $m24-color-white;
        left: 50%;
        margin: 0 auto;
        overflow: auto;
        padding: 0;
        position: absolute;
        right: auto;
        top: 100%;
        width: calc(680px + $grid-gutter); // at 1440px this makes the width 6 columns plus 1/2 a gutter
        transform: translateX(-50%);

        .mzp-is-scrolling & {
            // copied from the parent .mzp-is-scrolling definition, but edited to move it down so it doesn't appear to hover over top of the parent menu
            box-shadow: 0 6px 6px 1px rgba(29, 17, 51, 0.04), 0 8px 8px $border-width rgba(9, 32, 77, 0.12), 0 5px 5px -3px rgba(29, 17, 51, 0.12);
        }
    }
}

.m24-mzp-is-basic .m24-c-menu-panel {
    display: block;

    @media #{$mq-md} {
        display: none;
    }
}

.m24-mzp-is-enhanced .m24-c-menu-panel {
    display: none;
}

.m24-c-menu-panel .m24-c-menu-panel-container {
    margin: 0 auto;
    max-width: $content-max;

    @media #{$mq-md} {
        padding: $spacer-lg 0;
    }
}

.m24-c-menu-item-title {
    font-family: var(--body-font-family);
    font-size: $text-body-md;
    font-weight: 600;
    margin-bottom: 0;
}

.m24-c-menu-item {
    max-width: 100%;
    padding: 0;

    @media #{$mq-md} {
        width: auto;
    }

    .m24-c-menu-item-link {
        align-items: center;
        display: flex;
        padding: 8px 0;
        text-decoration: none;
        width: 100%;

        &:link,
        &:visited {
            text-decoration: none;
        }

        .m24-c-menu-item-title {
            border: none;
            position: relative;
        }
    }
}

.m24-c-menu-item .m24-c-menu-item-link
.m24-c-menu-item .m24-c-menu-item-link:link,
.m24-c-menu-item .m24-c-menu-item-link:visited {
    text-decoration: none;

    .m24-c-menu-item-title {
        border: none;
    }

    svg path {
        fill: $color-black;
    }
}

.m24-c-menu-item .m24-c-menu-item-link:hover,
.m24-c-menu-item .m24-c-menu-item-link:visited:hover {
    .m24-c-menu-item-title {
        color: $m24-color-dark-green;
        border: none;

        &::after {
            background: $m24-color-dark-green;
            bottom: 1px;
            content: "";
            display: block;
            height: 1px;
            left: 0;
            position: absolute;
            width: 100%;
        }
    }

    svg path {
        fill: $m24-color-dark-green;
    }
}

.m24-c-menu-panel-content.multi-column {
    @media #{$mq-md} {
        display: flex;
        padding: 0 $grid-margin;
        column-gap: $spacer-lg;
        margin: 0 auto;
    }

    .m24-mzp-l-content-container {
        margin-top: $spacer-xl;

        @media #{$mq-md} {
            margin-top: 0;
        }

        p {
            margin-bottom: $spacer-sm;
            color: #6d6d6d;
            font-size: $text-body-sm;
            font-weight: 600;
        }
    }
}

.m24-c-menu-panel .m24-c-menu-panel-content > .m24-mzp-l-content {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: $spacer-md $grid-margin;
    max-width: $content-max;

    @media #{$mq-md} {
        padding: 0 $grid-margin;
    }

    & > li {
        border-bottom: $border-width solid transparent;
        width: 100%;

        @media #{$mq-md} {
            border-bottom: $border-width solid $token-color-light-gray;
        }

        .m24-c-menu-item {
            border-bottom: transparent;
        }
    }
}

.m24-c-menu-panel .m24-c-menu-category-link {
    border: none;
    display: flex;
    font-size: $text-body-md;
    justify-content: flex-end;
    margin: $spacer-lg $spacer-lg 0;
    padding: 0;
}

.m24-c-menu-panel .m24-c-menu-category-link a,
.m24-c-menu-panel .m24-c-menu-category-link a:visited,
.m24-c-menu-panel .m24-c-menu-category-link a:link {
    border: none;
    color: $color-black;
    display: flex;
    font-weight: 600;
    position: relative;
    text-decoration: none;
    width: fit-content;

    svg {
        @include bidi((
            (left, auto, 0),
            (margin-left, $spacing-xs, 0),
            (margin-right, 0, $spacing-xs),
            (right, 0, auto),
            (transition-property, right, left),
            (transform, none, rotate(-180deg)),
        ));
        height: 0.8em;
        position: relative;
        top: 0.15em;
        transition-duration: $fast;
        transition-timing-function: $bezier;
        width: auto;
    }
}

.m24-c-menu-panel .m24-c-menu-category-link a:hover,
.m24-c-menu-panel .m24-c-menu-category-link a:focus {
    color: $m24-color-dark-green;

    svg {
        @include bidi((
            (right, -$spacing-sm, auto),
            (left, auto, -$spacing-sm),
        ));
    }
}

.mzp-has-icon .m24-c-menu-item-link {
    @include bidi(((padding-right, 0, 0), (padding-left, 0, 0)));

    .m24-c-menu-item-icon {
        height: 16px;
        width: 16px;
        @include bidi(((padding-right, 8px, 0), (padding-left, 0, 8px)));
    }
}

.mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link,
.mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:link,
.mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:active,
.mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:visited {
    .m24-c-menu-item-title {
        border: none;
        font-weight: 600;
        position: relative;
        text-decoration: none;
    }
}

.mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:hover,
.mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:visited:hover {
    .m24-c-menu-item-title {
        border: none;
        text-decoration: none;

        &::after {
            background: $m24-color-dark-green;
        }
    }
}

// Menu panel close button shown on desktop sized view ports.
.m24-c-menu-button-close {
    @include bidi(((right, 15px, left, auto), (left, auto, right, 15px)));
    @include image-replaced;
    background: $color-white url('/media/protocol/img/icons/close.svg') center center no-repeat;
    @include background-size(20px, 20px);
    border: $border-width solid transparent;
    cursor: pointer;
    display: none;
    height: 24px;
    padding: var(--spacer-xs);
    position: absolute;
    top: 15px;
    width: 24px;
    transition: border-color $fast $bezier;

    &:hover,
    &:focus {
        border-color: $m24-color-mid-gray;
    }
}

// page content - hide all content except for the nav when mobile nav menu is open
// This is not part of Protocol, it is specifc to Bedrock; should be documented in future
body:has(.m24-c-navigation-items.mzp-is-open) {
    & > .m24-pencil-banner,
    & > .c-sub-navigation,
    & > .moz-consent-banner.is-visible,
    & > .c-banner.c-banner-is-visible,
    & > #outer-wrapper {
        display: none !important; /* stylelint-disable-line declaration-no-important */

        @media #{$mq-md} {
            display: block !important; /* stylelint-disable-line declaration-no-important */
        }
    }
}