/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

// --V1.5.6.2 w/o ACSS
// DOCS HERE: https://docs.nickarce.com/

// header
header .header {
    padding-block: calc(clamp(2rem, 3.059vw + 1.388rem, 4rem));
    padding-inline: calc(clamp(1.5rem, 0.765vw + 1.347rem, 2rem));
    .header__container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .header__logo {
        width: 18rem;
    }
}



/* -----------------------NAV ITEMS-------------------- */




// DO YOU WANT THE LAST NAV ITEM TO LOOK LIKE A BUTTON ON DESKTOP? https://nickarce.com/desktop-button/ **********
$last-nav-button-desktop: true; // SELECTION (true/false) *********

// DO YOU WANT THE LAST NAV ITEM TO LOOK LIKE A BUTTON ON MOBILE? https://nickarce.com/mobile-button/ **********
$last-nav-button-mobile: true; // SELECTION (true/false) *********

// IF USING BUTTON ON MOBILE: DO YOU WANT IT AT THE BOTTOM OF THE SCREEN https://nickarce.com/mobile-button-bottom/ **********
$last-nav-button-mobile-bottom: true; // SELECTION (true/false)

// STYLE LAST NAV BUTTON HERE ********
@mixin last-link-btn-style {
    // style button here
    padding: 0.8em 1.2em;
    background-color: black;
    border: 1px solid black;
    color: white;
    transition: all 0.2s ease;

    //hover styling
    &:hover {
        background-color: transparent;
        color: black;
    }
}

// WHAT STYLES DO YOU WANT YOUR NAV LINKS? https://nickarce.com/link-styles/ ******
@mixin link-style {
    color: black;

    //active page style
    &[aria-current="page"], &.aria-current {

    }
}

//WHAT STYLES DO YOU WANT YOUR NAV LINKS ON HOVER AND YOUR DROPDOWNS WHEN THEY ARE OPEN? *****
@mixin link-hover-style {
    color: gray;

     //active page style
    &[aria-current="page"], &.aria-current {

    }

}

// DO YOU WANT DIFFERENT NAV LINK STYLING FOR STICKY HEADER ON SCROLL? https://nickarce.com/sticky-link-style/ ******
$sticky-header-styles: false; // SELECTION (true/false)

// WHAT STYLES DO YOU WANT THE LINKS ON A STICKY HEADER? ******
@mixin sticky-link-style {
    color: red;

    //active page style
    &[aria-current="page"], &.aria-current {
        background-color: magenta;
    }
}

// WHAT STYLES DO YOU WANT YOUR NAV LINKS ON HOVER AND YOUR DROPDOWNS WHEN THEY ARE OPEN ON STICKY? ******
@mixin sticky-link-hover-style {
    color: blue;

    //active page style
    &[aria-current="page"], &.aria-current {
        background-color: magenta;
    }
}

// DESKTOP MENU ITEMS GAP https://nickarce.com/nav-items-gap/ ******
$nav-items-gap: 1.8em;

// ACTIVE DESKTOP DROPDOWN ICON ANIMATION (if no animation select 'none') https://nickarce.com/dropdown-icon-animation/ ******
$active-dropdown-icon-anim: flip; // SELECTION (none/flip/rotate)

// MOBILE HAMBURGER ICON SIZE ******
$hamburger-icon-size: 2.6rem; // hamburger icon

// MOBILE HAMBURGER ICON COLOR ******
$hamburger-color: black;

// SET STICKY HAMBURGER COLOR MUST HAVE $sticky-header-styles set to true for it to work ******
$hamburger-sticky-color-choice: red;

// IF USING A CUSTOM HAMBURGER ICON DO YOU WANT TO SET THE FILL OR STROKE COLOR ******
$custom-hamburger-icon-fill-stroke: none; //SELECTION (none/fill/stroke)




/* --------------------MEGA MENU CONTENT DESKTOP & MOBILE----------------- */




// ARE YOU USING ACSS AUTO CONTENT GAP?
$fix-acss-content-gap: true; // SELECTION (true/false)

// WHAT BACKGROUND COLOR DO YOU WANT FOR DROPDOWN WRAPPER ******
$dropdown-background: white;

// WHAT STYLES DO YOU WANT THE LINKS IN THE MENU DROPDOWN ON DESKTOP? https://nickarce.com/dropdown-links-style/ ******
@mixin dropdown-link-style {
    color: black;
    padding: 2rem 1.4rem;
    
    //hover styling
    &:hover {
        color: white;
        background-color: black;
    }
}

// UPDATE THE DESKTOP MEGA DROPDOWN CONTAINER STYLE HERE https://nickarce.com/mega-menu-dropdown-style/ ******
@mixin mega-dropdown-content {
    //style here
    padding-block: 2rem;
    padding-inline: 2rem;
    gap: 2rem;
    box-shadow: 119px 360px 152px rgba(0, 0, 0, 0.01), 67px 203px 128px rgba(0, 0, 0, 0.05), 30px 90px 95px rgba(0, 0, 0, 0.09), 7px 23px 52px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    flex-direction: row;
}

// UPDATE THE DESKTOP MENU DROPDOWN (non mega) CONTAINER STYLE HERE https://nickarce.com/menu-dropdown-style/ ******
@mixin standard-menu-dropdown-content {
    //style here
    min-width: fit-content;
    box-shadow: 119px 360px 152px rgba(0, 0, 0, 0.01), 67px 203px 128px rgba(0, 0, 0, 0.05), 30px 90px 95px rgba(0, 0, 0, 0.09), 7px 23px 52px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);

    // link text length. this will help size the dropdown
    > li a, > li .brx-submenu-toggle {
        white-space: nowrap;
    }
}

// DROPDOWN OPEN ANIMATION ON DESKTOP ******
$fade-up-closed: 40px; // STARTING POSITION (not active)
$fade-up-open: 20px; // ENDING POSITION (active)


// UPDATE THE MOBILE MEGA DROPDOWN CONTAINER STYLE HERE https://nickarce.com/mobile-mega-content/ ******
@mixin dropdown-content-mobile {
    //style here
    flex-direction: column;
}

// DO YOU WANT TO HIDE THE SCROLLBAR FOR THE DROPDOWN CONTENT ON MOBILE? ******
$hide-scrollbar-sub-nav-scrollbar: true; // SELECTION (true/false)




/* -----------------------MOBILE SETTINGS-------------------- */




// WHEN WILL YOUR NAVIGATION CHANGE TO MOBILE? ******
$navigation-breakpoint: 1100px;

// SET MOBILE PADDING ******
:root {
    --mm-pad-v: 2rem; // vertical spacing to be used throughout mobile design
    --mm-pad-h: 2rem; // horizontal spacing to be used throughout mobile design
}

// WHERE DO YOU WANT THE MOBILE MENU TO SLIDE OPEN FROM? ******
$mobile-menu-slide-start-point: right; // SELECTION (left/right/top/bottom)

// HOW LONG SHOULD THE SLIDE TAKE? ******
$mobile-menu-slide-transition-time: 0.4s;

// WHAT TRANSITION EFFECT DO YOU WANT? ******
$mobile-menu-slide-transition-effect: cubic-bezier(0.79,0.14,0.15,0.86);

// MOBILE MENU BACKGROUND COLOR ******
$mobile-background-color: white;

// MOBILE MENU NAV LINK STYLE https://nickarce.com/mobile-menu-nav-items/ ******
@mixin mobile-nav-list-style {
    // using those spacing values
    padding-block: var(--mm-pad-v);
    padding-inline: var(--mm-pad-h);
    gap: 1rem;
}

// MOBILE MENU NAV LINK STYLE https://nickarce.com/mobile-menu-nav-item/ ******
@mixin mobile-link-style {
    color: black;
    padding-block: 1em;
    padding-inline: 1em;
    background-color: #F2F2F2;

    //hover style
    &:hover {

    }

    //active page style
    &[aria-current="page"], &.aria-current {

    }
}


//DO YOU WANT ANY PADDING ON THE LAST NAV ITEM ON MOBILE? must have $last-nav-button-mobile set to 'true' *****
$mobile-last-link-padding-block: unset;
$mobile-last-link-padding-inline: unset;

// SET MOBILE LINK BOTTOM BORDER CSS. USE 'none' IF YOU DONT WANT BORDERS https://nickarce.com/mobile-menu-border/ ******
$mm-border: none; // border value (like: 1px solid red) or none

// DO YOU WANT A MOBILE LOGO? (add logo under nav nestable > nav items wrapper > mobile nav > mobile logo) ******
$mobile-logo: true; // SELECTION (true/false)

// WHAT HEIGHT DO YOU WANT THE LOGO? ******
$mobile-logo-height: 3rem;

// BACK BUTTON STYLING https://nickarce.com/back-button-styling/ ******
.mm-close-dropdown-btn {
    background-color: unset;
    gap: 0.5em;
    padding-inline-start: unset;
}

// MOBILE CLOSE ICON SIZE ******
$close-icon-size: 2.6rem; // close icon

// MOBILE CLOSE ICON COLOR ******
$close-icon-color: black;

// IF USING A CUSTOM CLOSE ICON DO YOU WANT TO SET THE FILL OR STROKE COLOR ******
$custom-close-icon-fill-stroke: none; // SELECTION(none/fill/stroke)




/* ----------------------YOUR CUSTOM CSS--------------------- */




// Global Mega Menu Styling
.mm {

    //nest items here

}

// Specifically Not Mobile Menu
.mm:not(.brx-open) {

    //nest items here

}

// Mega Menu Styling Only At Breakpoint
@media (max-width: $navigation-breakpoint) {

    .mm {

        //nest items here

    }

}

// Mega Menu Styling On Mobile Menu
.mm.brx-open {

    //nest items here

}




/* -----------------------END OF YOUR CUSTOM CSS-------------------- */




/* -----------------------LOGIC *IGNORE*-------------------- */




$megamenu-selector: '.brxe-dropdown.brx-has-megamenu';
$standardmenu-selector: '.brxe-dropdown:not(.brx-has-megamenu)';
$dropdown-content-selector: '.brx-dropdown-content';
$bothmenu-selector: '.brxe-dropdown';

$mobile-menu-slide-start-points: (
    left: translateX(-100%),
    right: translateX(100%),
    top: translateY(-100%),
    bottom: translateY(100%)
);

@mixin last-link-style-mobile {
    padding-block: var(--mm-pad-v);
    padding-inline: var(--mm-pad-h);
    text-align: center;
}

@mixin mobile-nav-items-style {

    > .mm__nav-link {
        @include mobile-link-style();
        width: 100%;
    }

    > .brx-submenu-toggle {
        @include mobile-link-style();

        svg {
            color: inherit;
            font-weight: inherit;
        }

        > a {
            color: inherit;
            font-weight: inherit;
            text-decoration: inherit;
        }
    }
}

@mixin unopened-dropdown-content {
    display: flex;
    position: fixed !important;
    inset-block: var(--mobile-top-nav-height) 0;
    @layer bricks.reset {
        inset-inline-start: 100% !important;
    }
    transition-property: inset-inline-start, opacity, visibility;
    transition-duration: $mobile-menu-slide-transition-time;
    display: flex;
    padding-block: var(--mm-pad-v);
    padding-inline: var(--mm-pad-h);
    width: 100%;
    overflow-x: hidden;
    @include dropdown-content-mobile();
    background-color: $mobile-background-color;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;

    > * {
        max-width: 100%;
    }
}

@each $key, $value in $mobile-menu-slide-start-points {
    @if $mobile-menu-slide-start-point == $key {
        $mobile-menu-slide-start-point: $value;
    }
}

@if $sticky-header-styles {
    header.scrolling .mm .mm__toggle-open {
        color: $hamburger-sticky-color-choice;
    }
}

@if $sticky-header-styles and $last-nav-button-desktop {
    header.scrolling .mm:not(.brx-open) .mm__nav-items{
        > li:not(:last-of-type) {
            > a {
                @include sticky-link-style();

                &:hover {
                    @include sticky-link-hover-style();
                }
            }
            > .brx-submenu-toggle {
                @include sticky-link-style();

                a, span, svg {
                    color: inherit;
                }
            }

            &.open > .brx-submenu-toggle, &:hover > .brx-submenu-toggle {
                @include sticky-link-hover-style();
            }
        }
    }
}


@if $sticky-header-styles and $last-nav-button-desktop == false {
    header.scrolling .mm:not(.brx-open) .mm__nav-items {
        > li {
            > a {
                @include sticky-link-style();

                &:hover {
                    @include sticky-link-hover-style();
                }
            }
            > .brx-submenu-toggle {
                @include sticky-link-style();

                a, span, svg {
                    color: inherit;
                }
            }

            &.open > .brx-submenu-toggle, &:hover > .brx-submenu-toggle {
                @include sticky-link-hover-style();
            }
        }
    }
}

@if $fix-acss-content-gap == true {
    .mm__nav-items-wrapper, #{$dropdown-content-selector} {
        gap: unset;
    }
}



/* -----------------------END OF LOGIC-------------------- */




/* -----------------------REST OF CSS BELOW--------------------*/




// global menu styling
.mm {

    //mega dropdown
    #{$megamenu-selector} {
        #{$dropdown-content-selector} {
            @include mega-dropdown-content();
        }
    }

    //standard dropdown
    #{$standardmenu-selector} {

        #{$dropdown-content-selector} {
            @include standard-menu-dropdown-content();
        }

    }

    .mm__mobile-nav {
        display: none;
    }

    .mm-close-dropdown-btn {
        position: absolute;
        inset-inline-start: var(--mm-pad-h);
    }

}


@media (min-width: $navigation-breakpoint) {
    .mm{
         //standard dropdowns
        #{$standardmenu-selector} {

            #{$dropdown-content-selector} {

                .menu-item a, #{$standardmenu-selector} .brx-submenu-toggle {
                    @include dropdown-link-style();
                }

                .menu-item a {
                    width: 100%;
                }


                .brx-submenu-toggle > a {
                    color: inherit;
                    font-weight: inherit;
                    text-transform: inherit;
                }
            }

            //sub standard dropdowns
            #{$standardmenu-selector} {

                .brx-submenu-toggle {
                    justify-content: space-between;

                    svg {
                        transform: rotate(-90deg);
                    }
                }
            }
        }

        //both dropdowns
        #{$bothmenu-selector} {

            #{$dropdown-content-selector} {
                background-color: $dropdown-background;
            }
        }

        .mm__nav-items-wrapper {
            transition-duration: 0s;
        }

        //nav-items
        .mm__nav-items {
            gap: $nav-items-gap;

            > li {
                // offset if max-width on ACSS text is changed.
                max-inline-size: max-content;
            }

            > #{$bothmenu-selector} {

                > .brx-submenu-toggle button svg {
                    transform: rotate(0);
                    transition: transform 0.2s ease-in-out;
                }

                > #{$dropdown-content-selector} {
                    transform: translateY($fade-up-closed);
                }

                &.open {

                    > #{$dropdown-content-selector} {
                        transform: translateY($fade-up-open);
                    }

                    @if $active-dropdown-icon-anim == rotate {

                        > .brx-submenu-toggle button svg {
                            transform: rotate(-180deg);

                        }

                    } @else if $active-dropdown-icon-anim == flip {

                        > .brx-submenu-toggle button svg {
                            transform: rotatex(180deg);

                        }
                    }
                }
            }

            @if $last-nav-button-desktop {
                > li:last-of-type {
                    a.mm__nav-link, > .brx-submenu-toggle {
                        @include last-link-btn-style();
                        width: 100%;
                    }

                    .brx-submenu-toggle {
                        a {
                            color: inherit;
                        }
                    }
                }

                > li:not(:last-of-type) {
                    > a {
                        @include link-style();

                        &:hover {
                            @include link-hover-style();
                        }
                    }
                    > .brx-submenu-toggle {
                        @include link-style();

                        a, span, svg {
                            color: inherit;
                        }
                    }

                    &.open > .brx-submenu-toggle, &:hover > .brx-submenu-toggle {
                        @include link-hover-style();
                    }
                }
            } @else {
                > li {
                    > a {
                        @include link-style();

                        &:hover {
                            @include link-hover-style();
                        }
                    }
                    > .brx-submenu-toggle {
                        @include link-style();

                        a, span, svg {
                            color: inherit;
                        }
                    }

                    &.open > .brx-submenu-toggle, &:hover > .brx-submenu-toggle {
                        @include link-hover-style();
                    }
                }
            }
        }
    }
}


// at breakpoint styling
@media (max-width: $navigation-breakpoint) {

    .mm {
        .mm__toggle-open {
            display: flex !important;
            --brxe-toggle-scale: 1;
            color: $hamburger-color;
            font-size: $hamburger-icon-size;

            svg {
                width: $hamburger-icon-size;
                height: auto;
                color: inherit;

                path {
                    @if $custom-hamburger-icon-fill-stroke == stroke {
                        stroke: currentColor;
                    }

                    @if $custom-hamburger-icon-fill-stroke == fill {
                        fill: currentColor;
                    }
                }
            }
        }

        .mm__mobile-nav {
            padding-block: var(--mm-pad-v);
            padding-inline: var(--mm-pad-h);
            border-block-end: $mm-border;
            display: flex;

            .mm-close-dropdown-btn {
                opacity: 0;
                visibility: hidden;
                transform: translatex(100%);
                transition: opacity $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect, visibility $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect, transform $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect;
            }

            &[data-submenu-open="True"] {
                .mm-close-dropdown-btn {
                    visibility: visible;
                    opacity: 1;
                    transform: translatex(0);
                }
            }

            @if $mobile-logo {
                align-items: center;
                flex-direction: row-reverse;
                justify-content: space-between;
            } @else {
                align-items: flex-end;
            }
        }

        //standard dropdown
        .mm__nav-items #{$standardmenu-selector} {

            #{$dropdown-content-selector} {
                li > a {
                    @include mobile-link-style();
                    width: 100%;
                }

                #{$standardmenu-selector} .brx-submenu-toggle {
                    @include mobile-link-style();

                    svg {
                        color: inherit;
                        font-weight: inherit;
                    }

                    > a {
                        color: inherit;
                        font-weight: inherit;
                        text-decoration: inherit;
                    }
                }
            }
        }


        //both dropdowns
        .mm__nav-items #{$bothmenu-selector} {
            position: static;

            > #{$dropdown-content-selector} {
                @include unopened-dropdown-content();
            }

            > .brx-submenu-toggle {
                justify-content: space-between;
            }

            > .brx-submenu-toggle button {

                svg {
                    transition: none;
                    transform: rotate(-90deg);
                }
            }

            // when dropdown is open
            &.open {

                > #{$dropdown-content-selector} {
                    @layer bricks.reset {
                        inset-inline-start: 0% !important;
                    }
                }


            }

            @if $hide-scrollbar-sub-nav-scrollbar {

                #{$dropdown-content-selector} {
                    -ms-overflow-style: none;  /* IE and Edge scrollbar */
                    scrollbar-width: none;  /* Firefox scrollbar */
                    &::-webkit-scrollbar { display: none; } // Chrome scrollbar
                }
            }
        }

        //nav items wrapper
        .mm__nav-items-wrapper {

            position: fixed;
            inset: 0;
            background-color: $mobile-background-color;
            z-index: 1001;
            transform: $mobile-menu-slide-start-point;
            display: flex;
            visibility: hidden;
            transition: transform $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect, visibility $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect;

            .mm__toggle-close {
                display: flex;
                font-size: $close-icon-size;
                color: $close-icon-color;

                svg {
                    width: $close-icon-size;
                    height: auto;
                    color: inherit;


                    path {
                        @if $custom-close-icon-fill-stroke == stroke {
                            stroke: currentColor;
                        }
                        @if $custom-close-icon-fill-stroke == fill {
                            fill: currentColor;
                        }

                    }
                }
            }
            //nav-items
            ul.mm__nav-items {
                position: relative;
                overflow-x: hidden;
                overflow-y: auto;
                display: flex;
                flex: 1;
                justify-content: flex-start;
                background-color: $mobile-background-color;
                -ms-overflow-style: none;  /* IE and Edge scrollbar */
                scrollbar-width: none;  /* Firefox scrollbar */
                &::-webkit-scrollbar { display: none; } // Chrome scrollbar
                align-items: stretch;
                bottom: 0;
                flex-direction: column;
                flex-wrap: nowrap;
                inset-inline: 0;
                @include mobile-nav-list-style;
                transition: visibility $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect;
                
                @layer bricks.reset {
                    opacity: 1 !important;
                }

                @if $last-nav-button-mobile {
                    > li:last-of-type {
                        padding-block: $mobile-last-link-padding-block;
                        padding-inline: $mobile-last-link-padding-inline;

                        .mm__nav-link, > .brx-submenu-toggle {
                            @include last-link-btn-style();
                            width: 100%;
                            > a {
                                color: inherit;
                                font-weight: inherit;
                            }
                        }
                    }

                    > li:not(:last-of-type) {
                        border-block-end: $mm-border;
                        @include mobile-nav-items-style();
                    }

                } @else  {
                    > li {
                        border-block-end: $mm-border;
                        @include mobile-nav-items-style();
                    }
                }

                @if $last-nav-button-mobile and $last-nav-button-mobile-bottom {
                    > li:last-of-type {
                        margin-block-start: auto;
                        a.mm__nav-link, #{$megamenu-selector}, #{$standardmenu-selector} {
                            text-align: center;
                        }
                    }
                }
            }
        }

        .mm__nav-items li#{$standardmenu-selector} {
            #{$dropdown-content-selector} {
                @include mobile-nav-list-style;

                .menu-item, #{$standardmenu-selector} {
                    border-block-end: $mm-border;
                }
            }
        }

        @if $mobile-logo {
            .mm__mobile-logo {
                display: block;
                opacity: 1;
                transform: translatex(0);
                transition: opacity $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect, visibility $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect, transform $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect;

                img {
                    height: $mobile-logo-height;
                    width: auto;
                }
            }

            .mm__mobile-nav[data-submenu-open="True"]{
                .mm__mobile-logo {
                    visibility: hidden;
                    opacity: 0;
                    transform: translatex(-100%);
                    transition: opacity calc(#{$mobile-menu-slide-transition-time} / 1.5) $mobile-menu-slide-transition-effect, visibility $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect, transform $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect;
                    transition: opacity $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect, visibility $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect, transform $mobile-menu-slide-transition-time $mobile-menu-slide-transition-effect;

                }
            }
        }
    }

    //rtl specific overrides
    :where(html[dir="RTL"]) .mm {
        // dropdown icons change rotation
        .mm__nav-items #{$bothmenu-selector} {
            > .brx-submenu-toggle button {

                svg {
                    transform: rotate(90deg);
                }
            }
        }

        .mm__mobile-nav {
            // change direction of close dropdown btn animation
            .mm-close-dropdown-btn{
                transform: translatex(-100%);
                flex-direction: row-reverse;

            }
            @if $mobile-logo{
                // change mobile logo btn animation
                &[data-submenu-open="True"] .mm__mobile-logo {
                    transform: translatex(100%);
                }
            }

        }
    }
}

// when open on mobile
.mm.brx-open {

    .mm__nav-items-wrapper {
        visibility: visible;
        transform: translateX(0);
    }

    .mm__nav-items {
        @layer bricks.reset {
            visibility: visible !important;
        }
    }

}
@media (max-width: $navigation-breakpoint) {
    // if admin bar is shown offset mobile menu
    body.bricks-is-frontend.admin-bar .mm__nav-items-wrapper  {
        top: var(--wp-admin--admin-bar--height) !important;

        .mm__nav-items {
            top: unset;
        }
    }
}