@flyout_header_height: 96px;
@flyout_footer_height: 83px;

//Nav Top level
@main_menu_link_padding_top: 20px;
@main_menu_link_padding_side: 20px;
@main_menu_link_spacing: @main_menu_link_padding_side * 2;
@main_menu_link_icon_padding: 24px;


@main_menu_sub_link_padding_top: 8px;
@main_menu_sub_link_padding_side: 0;

@main_menu_sub_menu_padding: 24px 0;

//Grid
@main_menu_sub_gutter: 32px;
@main_menu_sub_gutter_spacing: @main_menu_sub_gutter / 2;


//Colours
@main_menu_sub_menu_bg_color: @dark_color;
@main_menu_sub_menu_text_color: #fff;
@main_menu_sub_menu_highlight_color: @primary_color;
@main_menu_top_level_highlight_color: @secondary_color;


//Font
@main_menu_font_size: 14;
@main_menu_line_height: 14px;

@main_menu_sub_menu_font_size: 14;
@main_menu_sub_menu_line_height: 14px;

//Icons
@main_menu_icon_weight: @global_fa_font_weight;

//Borders
@main_menu_sub_menu_border_top: 1.5px solid @border_color_alt;
@main_menu_sub_menu_border_bottom: none;
@main_menu_sub_menu_shadow: 0 8px 8px -6px rgba(0,0,0,0.32);


//Menu buttons
@main_menu_button_width: 32px;
@main_menu_button_height: 48px;
@main_menu_button_padding: 12px 16px;

//Animation
@main_menu_sub_menu_anim: visibility 400ms linear, opacity 400ms linear;

:root {
    --flyout_header_height: @flyout_header_height;
    --flyout_footer_height: @flyout_footer_height;

    //Nav Top level
    --main_menu_link_padding_top: @main_menu_link_padding_top;
    --main_menu_link_padding_side: @main_menu_link_padding_side;
    --main_menu_link_spacing: @main_menu_link_spacing;
    --main_menu_link_icon_padding: @main_menu_link_icon_padding;


    --main_menu_sub_link_padding_top: @main_menu_sub_link_padding_top;
    --main_menu_sub_link_padding_side: @main_menu_sub_link_padding_side;

    --main_menu_sub_menu_padding: @main_menu_sub_menu_padding;

    //Grid
    --main_menu_sub_gutter: @main_menu_sub_gutter;
    --main_menu_sub_gutter_spacing: @main_menu_sub_gutter_spacing;


    //Colours
    --main_menu_sub_menu_bg_color: @main_menu_sub_menu_bg_color;
    --main_menu_sub_menu_text_color: @main_menu_sub_menu_text_color;
    --main_menu_sub_menu_highlight_color: @main_menu_sub_menu_highlight_color;
    --main_menu_top_level_highlight_color: @main_menu_top_level_highlight_color;


    //Font
    --main_menu_font_size: @main_menu_font_size;
    --main_menu_line_height: @main_menu_line_height;

    --main_menu_sub_menu_font_size: @main_menu_sub_menu_font_size;
    --main_menu_sub_menu_line_height: @main_menu_sub_menu_line_height;

    //Icons
    --main_menu_icon_weight: @main_menu_icon_weight;

    //Borders
    --main_menu_sub_menu_border_top: @main_menu_sub_menu_border_top;
    --main_menu_sub_menu_border_bottom: @main_menu_sub_menu_border_bottom;
    --main_menu_sub_menu_shadow: @main_menu_sub_menu_shadow;


    //Menu buttons
    --main_menu_button_width: @main_menu_button_width;
    --main_menu_button_height: @main_menu_button_height;
    --main_menu_button_padding: @main_menu_button_padding;

    //Animation
    --main_menu_sub_menu_anim: @main_menu_sub_menu_anim;
}

.parentMobileLink {
    display: none !important;
}

/*
 * Secondary Navigation Menu
 */
.secondaryMenuNavigation {
    display: none;

    @media @flyout {
        display: block;
        clear: both;
        max-width: 100%;
    }
}


.flyoutButton  {
    position: relative;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    height: var(--main_menu_button_height);
    padding: var(--main_menu_button_padding);
    width: var(--main_menu_button_width);
    transition: all 200ms linear;
    background: transparent;

    &:hover {
        color: var(--primary_color);
        transition: all 200ms linear;
    }

    @media @flyout {
        padding: 16px 0;
        height: 56px;
    }

    .innerButton {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    i {
        color: var(--text_color);
        transition: color 200ms linear;

        width: 25px;
        height: 16px;

        .flyoutActive & {
            transition: color 200ms linear;
        }

        svg {
            width: 100%;
            height: 100%;
        }
    }

    i.openButton {
        display: inline-block;

        .flyoutActive & {
            display: none;
        }
    }

    i.closeButton {
        display: none;

        .flyoutActive & {
            display: inline-block;
        }
    }

}


.menuIcon {
    display: none !important;
}

// flyoutWrap
.flyoutWrap {
    // above flyout
    @media @above_flyout {
        float: none;
        clear: both;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    // flyout
    @media @flyout {
        position: fixed;
        top: 0;
        left: -24px;
        bottom: 0;
        height: 100vh;
        width: 50vw;
        max-width: 360px;
        background: var(--flyout_background_mobile);
        backdrop-filter: blur(10px);
        filter: drop-shadow(4px 4px 16px rgba(0,0,0,0.24));
        border-radius: 0 35px 35px 0;
        transform: translateX(-100%);
        transition: transform 600ms, opacity var(--flyout_transition_time), visibility var(--flyout_transition_time);
        overflow: hidden;
        padding: 0;
        color: var(--flyout_text_color_mobile);
        z-index: 9999999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        display: flex;
        flex-direction: column;
    }
    // mobile
    @media @mobile {
        width: 100%;
        max-width: 400px;
        left: 0;
    }
    &__header {
        @media @flyout {
            position: relative;
            z-index: 2;
            border-bottom: none;
            flex: 0 0 92px;
            height: auto;
            padding: 32px 56px 32px 24px;
            border-bottom: 1px solid color-mix(in srgb, var(--fade_mixin_color), var(--flyout_text_color_mobile) 4%);
        }
        &__top {
            @media @flyout {
                display: flex;
            }
        }
        &__title {
            @media @flyout {
                .rems(24);
                line-height: 1.2em;
                color: var(--flyout_text_color_mobile);
                margin: 0;
                width: 100%;
                padding: 0;
                flex: 1 1 100%;
                padding-right: 24px;
            }
        }
        &__button {
            border: none;
            background: transparent;
            color: var(--flyout_text_color_mobile);
            position: absolute;
            top: 50%;
            right: 10px;
            width: 48px;
            height: 48px;
            margin: 0;
            padding: 0;
            transition: color 200ms linear;
            cursor: pointer;
            transform: translateY(-50%);
            &__icon {
                @media @flyout {
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    margin: 0;
                    color: inherit;
                    svg {
                        @media @flyout {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            &:hover, &:active, &:focus-visible {
                @media @flyout {
                    color: var(--highlight_color);
                    transition: color 200ms linear;
                }
            }
        }
        @media @above_flyout {
            display: none;
        }
    }

    &__body {

        .rems(18);
        font-style: normal;
        line-height: 25.278px;

        ul {
            &:before, &:after {
                display: none;
            }
        }
        .siteMenu {
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 1.25em;
            @media @flyout {
                flex-direction: column;
                gap: 0.5em;
            }
            &__heading, &__link {
                color: var(--flyout_link_color);
                font-style: normal;
                font-weight: 500;
                text-align: left;
                letter-spacing: initial;
                text-transform: none;
                display: block;

                &:hover, &:focus-visible, &:active {
                    color: color-mix(in srgb, var(--highlight_color), var(--darken_mixin_color) 8%);
                }

                @media @flyout {
                    padding: 10px 0;
                    color: var(--flyout_link_color_mobile);
                }
                &.isClickable.open {
                    @media @flyout {
                        color: var(--highlight_color) !important;
                    }
                }
            }
            .childMenu {
                .rems(12);
                font-weight: 700;
                display: none;
                flex-direction: column;
                position: absolute;
                top: 100%;
                width: 100%;
                justify-content: center;
                gap: 1.25em;
            }

        }


        &.flyoutWrap__body {

            @media @flyout {
                margin: 45px 0;
                .rems(28);


            }

        }
        @media @flyout {
            flex: 1 1 100%;
            padding: 24px 24px 48px 24px;
            overflow-y: auto;
            position: relative;
            z-index: 2;
            .rems(16);
            line-height: 1.1em;







        }
        @media @above_flyout {
            &.linksMenu {
                display: none;
            }

            .menuIcon {
                color: var(--menu_chevron_color) !important;
                margin-left: 7px;
            }
            .siteMenu {

                display: flex;
                width: ~"calc(100% + 43px)";
                margin: 0 -21.5px;



                .siteMenu__item {

                    display: flex;
                    align-items :center;
                    padding: 0 21.5px;

                    .childMenu & {
                        position: relative;
                        padding: 0 12.5px;
                    }

                    .siteMenu__heading, .siteMenu__link {
                        white-space: nowrap;
                        display: flex;
                        align-items: center;
                        .rems(20);
                        font-weight: 600;
                        line-height: 25px;
                        position: relative;


                        .svgIcon {

                            width: 8px;
                            height: 8px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-left: 7px;

                            svg {
                                width: 100%;
                                height: auto;
                                max-width: 8px;
                            }

                        }

                    }


                    &.mobileOnly {
                        display: none !important;

                        @media @flyout {
                            display: block !important;
                        }
                    }

                }


            }
        }
    }
    .mobileMenu {
        @media @above_flyout {
            display: none;
        }

        &.mainNavigationMenu {
            @media @above_flyout {
                display: block;
            }
        }
    }

    .mobileTitle {
        display: none;
    }
    .flyoutInitialised & {
        @media @flyout {
            transition: transform 600ms, opacity var(--flyout_transition_time) ease-in-out, visibility var(--flyout_transition_time) ease-in-out;
        }

    }

    .flyoutActive & {
        @media @flyout {
            transform: translateX(0);
            transition: transform 600ms, opacity var(--flyout_transition_time) ease-in-out, visibility var(--flyout_transition_time) ease-in-out;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
    }


}
