@mixin padding($top: 0, $right: 0, $bottom: 0, $left: 0) {
    @if $top == $right and $right == $bottom and $bottom == $left and $left == $top {
        padding: $top;
    } @else if $top == $bottom and $right == $left {
        padding: $top $right;
    } @else {
        padding: $top $right $bottom $left;
    }
}

@mixin border-radius($topleft: 0, $topright: 0, $bottomright: 0, $bottomleft: 0) {
    @if $topleft == $topright and $topright == $bottomright and $bottomright == $bottomleft and $bottomleft == $topleft {
        border-radius: $topleft;
    } @else {
        border-radius: $topleft $topright $bottomright $bottomleft;
    }
}

@mixin box-shadow($value) {
    box-shadow: $value;
}

@mixin background($from, $to) {
    @if $to == $from {
        background-color: $to;
    } @else {
        background: linear-gradient(to bottom, $from, $to);
    }
}

@mixin border($top, $left, $right, $bottom, $color) {
    @if $top == 0px and $left == 0px and $right == 0px and $bottom == 0px {
        border: 0;
    } @else {
        border-top: $top solid $color;
        border-left: $left solid $color;
        border-right: $right solid $color;
        border-bottom: $bottom solid $color;
    }
}

@mixin mobile {
    @media only screen and (max-width : $responsive_breakpoint) {
        @content;
    }
}

@mixin desktop {
    @media only screen and (min-width : $responsive_breakpoint + 1) {
        @content;
    }
}

@mixin resets {
    #{$wrap},
    #{$wrap} #{$menu},
    #{$wrap} #{$menu} ul.mega-sub-menu,
    #{$wrap} #{$menu} li.mega-menu-item,
    #{$wrap} #{$menu} li.mega-menu-row,
    #{$wrap} #{$menu} li.mega-menu-column,
    #{$wrap} #{$menu} a.mega-menu-link,
    #{$wrap} #{$menu} span.mega-menu-badge,
    #{$wrap} button.mega-close,
    #{$wrap} button.mega-toggle-standard {
        transition: none;
        @include border-radius(0, 0, 0, 0);
        @include box-shadow(none);
        background: none;
        border: 0;
        bottom: auto;
        box-sizing: border-box;
        clip: auto;
        color: $panel_font_color;
        display: block;
        float: none;
        font-family: unquote($panel_font_family);
        font-size: $panel_font_size;
        height: auto;
        left: auto;
        line-height: $line_height;
        list-style-type: none;
        margin: 0;
        min-height: auto;
        max-height: none;
        min-width: auto;
        max-width: none;
        opacity: 1;
        outline: none;
        overflow: visible;
        padding: 0;
        position: relative;
        pointer-events: auto;
        right: auto;
        text-align: left;
        text-decoration: none;
        text-indent: 0;
        text-transform: none;
        transform: none;
        top: auto;
        vertical-align: baseline;
        visibility: inherit;
        width: auto;
        word-wrap: break-word;
        white-space: normal;
        -webkit-tap-highlight-color: transparent;

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

@mixin mobilemenu {

    .mega-menu-toggle {
        display: none;

        ~ button.mega-close {
            visibility: hidden;
            opacity: 0;
            transition: left $effect_speed_mobile ease-in-out, right $effect_speed_mobile ease-in-out, visibility $effect_speed_mobile ease-in-out, opacity $effect_speed_mobile ease-out;
        }

        @if $effect_mobile == slide_left {
            & ~ button.mega-close {
                right: 0;
                left: auto;
            }
        }

        @if $effect_mobile == slide_right {
            & ~ button.mega-close {
                right: auto;
                left: 0;
            }
        }

        @include mobile {
            z-index: 1;
            cursor: pointer;
            @include background($toggle_background_from, $toggle_background_to);
            @include border-radius($toggle_bar_border_radius_top_left, $toggle_bar_border_radius_top_right, $toggle_bar_border_radius_bottom_right, $toggle_bar_border_radius_bottom_left);
            line-height: $toggle_bar_height;
            height: $toggle_bar_height;
            text-align: left;
            user-select: none;
            outline: none;
            white-space: nowrap;

            @if $disable_mobile_toggle == on {
                display: none;
            } @else {
                display: flex;
            }

            img {
                max-width: 100%;
                padding: 0;
            }

            .mega-toggle-blocks-left,
            .mega-toggle-blocks-center,
            .mega-toggle-blocks-right {
                display: flex;
                flex-basis: 33.33%;
            }

            .mega-toggle-block {
                display: flex;
                height: 100%;
                outline: 0;
                align-self: center;
                flex-shrink: 0;
            }
            
            .mega-toggle-blocks-left {
                flex: 1;
                justify-content: flex-start;

                .mega-toggle-block {
                    margin-left: 6px;

                    &:only-child {
                        margin-right: 6px;
                    }
                }
            }

            .mega-toggle-blocks-center {
                justify-content: center;

                .mega-toggle-block {
                    margin-left: 3px;
                    margin-right: 3px;
                }
            }

            .mega-toggle-blocks-right {
                flex: 1;
                justify-content: flex-end;

                .mega-toggle-block {
                    margin-right: 6px;

                    &:only-child {
                        margin-left: 6px;
                    }
                }
            }

            + #{$menu} {
                flex-direction: column;
                flex-wrap: nowrap;
                @include background($mobile_background_from, $mobile_background_to);
                @include padding($mobile_menu_padding_top, $mobile_menu_padding_right, $mobile_menu_padding_bottom, $mobile_menu_padding_left);
                
                @if $disable_mobile_toggle == on {
                    display: flex; 
                } @else {
                    display: none;

                    @if $mobile_menu_overlay == on or $mobile_menu_force_width == on {
                        position: absolute;
                        width: 100%;
                        z-index: 9999999;
                    }
                }

                @if ( ( $effect_mobile == slide_right or $effect_mobile == slide_left ) and $disable_mobile_toggle == off ) {
                    position: fixed;
                    width: $mobile_menu_off_canvas_width;
                    max-width: 100%;
                    height: 100dvh;
                    max-height: 100dvh;
                    top: 0;
                    box-sizing: border-box;
                    transition: left $effect_speed_mobile ease-in-out, right $effect_speed_mobile ease-in-out, visibility $effect_speed_mobile ease-in-out;
                    overflow-y: auto;
                    overflow-x: hidden;
                    z-index: 9999999999;
                    overscroll-behavior: contain;
                    visibility: hidden;
                    display: flex;
                }
            }

            &.mega-menu-open { 
                & + #{$menu} {
                    display: flex;
                    visibility: visible;
                }
            }

            @if ( ( $effect_mobile == slide_right or $effect_mobile == slide_left ) and $disable_mobile_toggle == off ) {
                position: relative;

                & ~ button.mega-close {
                    display: flex;
                    position: fixed;
                    top: 0;
                    z-index: 99999999999;
                    cursor: pointer;

                    &:before {
                        display: flex;
                        content: $close_icon;
                        font-family: $close_icon_font;
                        font-weight: $close_icon_font_weight;
                        color: $close_icon_color;
                        align-items: center;
                        justify-content: center;
                        width: 40px;
                        height: 40px;
                        font-size: $close_icon_font_size;
                    }
                }

                @if ($effect_mobile == slide_right ) {
                    + #{$menu} {
                        left: -$mobile_menu_off_canvas_width;
                    }

                    &.mega-menu-open {
                        & ~ button.mega-close {
                            visibility: visible;
                            opacity: 1;
                            
                            @if $mobile_menu_off_canvas_width == '100%' {
                                left: auto;
                                right: 0;
                            } @else {
                                left: calc(min(100vw - 40px, #{$mobile_menu_off_canvas_width}));
                                right: auto;
                            }
                        }

                        & + #{$menu} {
                            left: 0;
                        }
                    }
                }

                @if ($effect_mobile == slide_left ) {
                    + #{$menu} {
                        right: -$mobile_menu_off_canvas_width;
                    }
                    
                    &.mega-menu-open {
                        & ~ button.mega-close {
                            visibility: visible;
                            opacity: 1;

                            @if $mobile_menu_off_canvas_width == '100%' {
                                right: auto;
                                left: 0;
                            } @else {
                                right: calc(min(100vw - 40px, #{$mobile_menu_off_canvas_width}));
                                left: auto;
                            }
                        }

                        & + #{$menu} {
                            right: 0;
                        }
                    }
                }

                &.mega-menu-open:after {
                    position: fixed;
                    width: 100%;
                    height: 99999px;
                    content: "";
                    top: 0;
                    left: 0;
                    opacity: 0.5;
                    background: black;
                    cursor: pointer;
                    z-index: 9999999998;
                }
            }
        }
    }
}


@mixin keyboard {
    &.mega-keyboard-navigation {
        .mega-menu-toggle:focus,
        .mega-toggle-block:focus,
        .mega-toggle-block a:focus,
        .mega-toggle-block button:focus,
        .mega-toggle-block .mega-search input[type=text]:focus,
        .mega-toggle-block button.mega-toggle-animated:focus,
        #{$menu} a:focus,
        #{$menu} span:focus,
        #{$menu} input:focus,
        #{$menu} li.mega-menu-item a.mega-menu-link:focus,
        #{$menu} form.mega-search-open:has(input[type=text]:focus),
        #{$menu} + button.mega-close:focus {
            outline-style: solid;
            outline-width: $keyboard_highlight_width;
            outline-color: $keyboard_highlight_color;
            outline-offset: $keyboard_highlight_offset;
        }

        .mega-toggle-block button.mega-toggle-animated:focus {
            outline-offset: 2px;
        }

        > li.mega-menu-item > a.mega-menu-link:focus {
            @include background($menu_item_background_hover_from, $menu_item_background_hover_to);
            color: $menu_item_link_color_hover;
            font-weight: $menu_item_link_weight_hover;
            text-decoration: $menu_item_link_text_decoration_hover;
            border-color: $menu_item_border_color_hover;

            @include mobile {
                color: $mobile_menu_item_link_color_hover;
                @include background($mobile_menu_item_background_hover_from, $mobile_menu_item_background_hover_to);
            }
        }
    }
}