/** This file is major component of this plugin so please don't try to edit here. */

@if( $page_wrapper != '' ) {
    #{$page_wrapper} {
        transition: transform $animation_speed;
    }
}

// Menu hamburger toggle styling.
@if($menu_trigger_position_type == 'inside-element'){
    .admin-bar #{$menu_trigger_id}{
        margin-top: 0px !important;
    }
}
#{$menu_trigger_id} {

    width : $menu_trigger_width;
    height : $menu_trigger_height;
    @if($menu_trigger_position_type == 'inside-element'){
        position: relative;
    }@else{
        position: $menu_trigger_position_type;
    }
    top : $menu_trigger_distance_from_top;
    border-radius: $toggle_button_border_radius + px;
    display: none;
    text-decoration: none;

    @if ( $menu_trigger_side == right ) {
        right: $menu_trigger_distance_from_side;
    } @else {
        left: $menu_trigger_distance_from_side;
    }

    @if ( $menu_trigger_transparent_background == on ) {
        background: transparent;
    } @else {

        background: $menu_trigger_background_color;

        &:hover,
        &:focus {
            background: $menu_trigger_background_color_hover;
            text-decoration: unset;
        }

        &.is-active {
            background: $menu_trigger_active_color;
        }
    }

    transition: transform $animation_speed, background-color $color_transition_speed;

   .rmp-trigger-box {
        width: $menu_trigger_line_width + $menu_trigger_line_width_unit;
        color: $menu_trigger_title_color;
   }

   .rmp-trigger-icon-active,
   .rmp-trigger-text-open {
       display: none;
   }

   &.is-active .rmp-trigger-icon-active,
   &.is-active .rmp-trigger-text-open {
        display:inline;
   }

   &.is-active .rmp-trigger-icon-inactive,
   &.is-active .rmp-trigger-text {
        display: none;
   }

    .rmp-trigger-label {
        color: $menu_trigger_title_color;
        pointer-events: none;
        line-height: $menu_trigger_title_line_height;

        @if( $menu_trigger_title_font != '' ) {
             font-family: $menu_trigger_title_font;
         } @else {
             font-family: inherit
         }

        font-size: $menu_trigger_title_font_size;
        display: inline;
        text-transform: inherit;

        &.rmp-trigger-label-top {
            display: block;
            margin-bottom: 12px;
        }

        &.rmp-trigger-label-bottom {
            display: block;
            margin-top: 12px;
        }
    }

   .responsive-menu-pro-inner {
        display: block;
    }
    .rmp-trigger-icon-inactive .rmp-font-icon{
        color: $menu_trigger_line_color;
    }
    .responsive-menu-pro-inner,
    .responsive-menu-pro-inner::before,
    .responsive-menu-pro-inner::after {
        width: $menu_trigger_line_width + $menu_trigger_line_width_unit;
        height: $menu_trigger_line_height + $menu_trigger_line_height_unit;
        background-color: $menu_trigger_line_color;
        border-radius: 4px;
        position: absolute;
    }
    .rmp-trigger-icon-active .rmp-font-icon{
        color: $menu_trigger_line_active_color;
    }
    &.is-active .responsive-menu-pro-inner,
    &.is-active .responsive-menu-pro-inner::before,
    &.is-active .responsive-menu-pro-inner::after {
        background-color: $menu_trigger_line_active_color;
    }
    &:hover .rmp-trigger-icon-inactive .rmp-font-icon{
        color: $menu_trigger_line_color_hover;
    }
    &:not(.is-active):hover .responsive-menu-pro-inner,
    &:not(.is-active):hover .responsive-menu-pro-inner::before,
    &:not(.is-active):hover .responsive-menu-pro-inner::after{
        background-color: $menu_trigger_line_color_hover;
    }
    .responsive-menu-pro-inner::before{
        top: $menu_trigger_line_margin + $menu_trigger_line_margin_unit;
    }
    .responsive-menu-pro-inner::after{
        bottom: $menu_trigger_line_margin + $menu_trigger_line_margin_unit;
    }
    &.is-active .responsive-menu-pro-inner::after {
        bottom: 0;
   }

}

/* Hamburger menu styling */
@media screen and ( max-width: $tablet_breakpoint ) {

    @if( $menu_to_hide != '' ) {
        #{$menu_to_hide} {
            display: none !important;
        }
    }

    #{$menu_trigger_id} {
        display: block;
    }

    #{$menu_container} {
        position: fixed;
        top: 0;
        margin: 0;
        transition: transform $animation_speed;
        overflow: auto;
        @if ( $animation_type != 'fade' ) {
            display:block;
        }

        @if ( $menu_width ) {
            width: $menu_width + $menu_width_unit;
        }

        @if ( $menu_maximum_width != '' ) {
            max-width: $menu_maximum_width+$menu_maximum_width_unit;
        }

        @if ( $menu_minimum_width != '' ) {
            min-width: $menu_minimum_width + $menu_minimum_width_unit;
        }

        background-color: $menu_container_background_colour;

        @if ( $menu_container_background_image ) {
            background-image: url($menu_container_background_image);
        }

        height: 100%;

        @if ( $menu_container_appear_from == "right" ) {
            right:0;
        } @else {
            left:0;
        }

        @if( $menu_container_padding_top != '' ) {
            padding-top : $menu_container_padding_top;
        }

        @if( $menu_container_padding_left != '' ) {
            padding-left : $menu_container_padding_left;
        }

        @if( $menu_container_padding_bottom != '' ) {
            padding-bottom : $menu_container_padding_bottom;
        }

        @if( $menu_container_padding_right != '' ) {
            padding-right : $menu_container_padding_right;
        }

    }

    #{$menu_wrap} {

        @if( $menu_section_padding_top != '' ) {
            padding-top : $menu_section_padding_top;
        }

        @if( $menu_section_padding_left != '' ) {
            padding-left : $menu_section_padding_left;
        }

        @if( $menu_section_padding_bottom != '' ) {
            padding-bottom : $menu_section_padding_bottom;
        }

        @if( $menu_section_padding_right != '' ) {
            padding-right : $menu_section_padding_right;
        }

        @if( $menu_background_color != '' ) {
            background-color: $menu_background_color;
        }

        .rmp-menu,
        .rmp-submenu {
            width: 100%;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        @if( $menu_container_columns != '' ) {
            .rmp-menu{
                display: flex;
                flex-wrap: wrap;
                > .rmp-menu-item{
                    width: $menu_container_columns;
                }
            }
        }

        // If legacy setting is on then add these settings.
        @if( $is_legacy == 'on' and $submenu_item_toggle_position == left) {
            .rmp-submenu-depth-1 .rmp-menu-item-link {
                padding-left: ( $submenu_item_toggle_width + 10 ) + $submenu_item_toggle_width_unit;
            }
        }@else{
            .rmp-submenu-depth-1 .rmp-menu-item-link {
                padding-#{$menu_depth_side} : ( $menu_item_padding_depth_1 + $menu_item_padding_depth_1_unit);
            }
        }

        @if( $menu_item_padding_depth_2 != '' and $menu_item_padding_depth_2_unit != '') {
            .rmp-submenu-depth-2 .rmp-menu-item-link {
                padding-#{$menu_depth_side} : ( $menu_item_padding_depth_2 + $menu_item_padding_depth_2_unit);
            }
        }

        @if( $menu_item_padding_depth_3 != '' and $menu_item_padding_depth_3_unit != '') {
            .rmp-submenu-depth-3 .rmp-menu-item-link {
                padding-#{$menu_depth_side} : ( $menu_item_padding_depth_3 + $menu_item_padding_depth_3_unit);
            }
        }

        @if( $menu_item_padding_depth_4 != '' and $menu_item_padding_depth_4_unit != '') {
            .rmp-submenu-depth-4 .rmp-menu-item-link {
                padding-#{$menu_depth_side} : ( $menu_item_padding_depth_4 + $menu_item_padding_depth_4_unit);
            }
        }

        .rmp-submenu.rmp-submenu-open {
            display: block;
        }

        .rmp-menu-item {
            width: 100%;
            list-style: none;
            margin:0;
        }

        .rmp-menu-item-link {

            @if( $menu_item_height != '' ) {
                height: ( $menu_item_height + $menu_item_height_unit);
            }

            @if( $menu_item_line_height != '' ) {
                line-height: ( $menu_item_line_height + $menu_item_line_height_unit );
            }

            @if( $menu_item_font_size != '' ) {
                font-size: ( $menu_item_font_size + $menu_item_font_size_unit );
            }


            @if( $menu_item_border_width != '' ) {
                border-bottom: ( $menu_item_border_width + $menu_item_border_width_unit ) solid $menu_item_border_color;
            } @else {
                border-bottom: ( 0 + $menu_item_border_width_unit ) solid $menu_item_border_color;
            }

            @if( $menu_item_font_family != '' ) {
                font-family: $menu_item_font_family;
            } @else {
                font-family: inherit;
            }

            color: $menu_item_text_color;
            text-align: $menu_item_text_alignment;
            background-color: $menu_item_background_color;
            @if( $menu_title_font_weight != '' ) {
                font-weight: $menu_item_font_weight;
            }
            letter-spacing: ($menu_item_letter_spacing + 'px');
            display: block;
            box-sizing: border-box;
            width: 100%;
            text-decoration: none;
            position: relative;
            overflow: hidden;
            transition: background-color $color_transition_speed, border-color $color_transition_speed, $color_transition_speed;

            @if ( $menu_word_wrap == 'on' ) {
                word-wrap: break-word;
                height: auto;
            }

            padding: 0 ( $menu_item_padding + $menu_item_padding_unit);
            padding-#{$menu_item_toggle_position}: ( $menu_item_toggle_width + 10 ) + $menu_item_toggle_width_unit;

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

            &:hover,
            &:focus {
                color: $menu_item_text_color_hover;
                border-color: $menu_item_border_color_hover;
                background-color: $menu_item_background_color_hover;
            }

            &:focus {
                outline: none;
                border-color:unset;
                box-shadow:unset;
            }

            .rmp-font-icon {
                height: ( $menu_item_height + $menu_item_height_unit);
                line-height: ( $menu_item_line_height + $menu_item_line_height_unit );
                margin-right: 10px;
                font-size: $menu_item_font_size + $menu_item_font_size_unit;
            }
        }


        .rmp-menu-current-item {
            .rmp-menu-item-link {
                color: $menu_current_item_text_color;
                border-color: $menu_current_item_border_color;
                background-color: $menu_current_item_background_color;

                &:hover,
                &:focus {
                    color: $menu_current_item_text_color_hover;
                    border-color: $menu_current_item_border_color_hover;
                    background-color: $menu_current_item_background_color_hover;
                }
            }
        }

        .rmp-menu-subarrow {
            position: absolute;
            top: 0;
            bottom: 0;
            text-align: center;
            overflow: hidden;
            background-size: cover;
            overflow: hidden;
            @if ( $menu_item_toggle_position == 'left' ) {
                left: 0;
                border-right-style:solid;
                @if ( $menu_item_toggle_border_color != '' ) {
                    border-right-color:$menu_item_toggle_border_color;
                }
                border-right-width: ( $menu_item_toggle_border_width + $menu_item_toggle_border_width_unit );
            } @else {
                right: 0;
                border-left-style:solid;
                @if ( $menu_item_toggle_border_color != '' ) {
                    border-left-color:$menu_item_toggle_border_color;
                }
                border-left-width: ( $menu_item_toggle_border_width + $menu_item_toggle_border_width_unit );
            }

            height: ($menu_item_toggle_height + $menu_item_toggle_height_unit);

            width: ( $menu_item_toggle_width + $menu_item_toggle_width_unit );
            color: $menu_item_toggle_text_color;
            svg{
                fill: $menu_item_toggle_text_color;
            }
            background-color: $menu_item_toggle_background_color;

            &:hover {
                @if ( $menu_item_toggle_text_color_hover != '' ) {
                    color: $menu_item_toggle_text_color_hover;
                    svg{
                        fill: $menu_item_toggle_text_color_hover;
                    }
                }
                @if ( $menu_item_toggle_border_color_hover != '' ) {
                    border-color: $menu_item_toggle_border_color_hover;
                }
                background-color: $menu_item_toggle_background_color_hover;
            }

            .rmp-font-icon {
                margin-right: unset;
            }

            * {
                vertical-align: middle;
                line-height: ($menu_item_toggle_height + $menu_item_toggle_height_unit);
            }
        }

        .rmp-menu-subarrow-active {
            display: block;
            background-size: cover;
            @if ( $menu_current_item_toggle_text_color != '' ) {
                color: $menu_current_item_toggle_text_color;
                svg{
                    fill: $menu_current_item_toggle_text_color;
                }
            }

            @if ( $menu_current_item_toggle_border_color != '' ) {
                border-color: $menu_current_item_toggle_border_color;
            }
            background-color: $menu_current_item_toggle_background_color;
            &:hover {
                @if ( $menu_current_item_toggle_text_color_hover != '' ) {
                    color: $menu_current_item_toggle_text_color_hover;
                    svg{
                        fill: $menu_current_item_toggle_text_color_hover;
                    }
                }
                @if ( $menu_current_item_toggle_border_color_hover != '' ) {
                    border-color: $menu_current_item_toggle_border_color_hover;
                }
                background-color: $menu_current_item_toggle_background_color_hover;
            }
        }

        .rmp-submenu {
            display: none;
            .rmp-menu-item-link {
                @if( $submenu_item_height != '' ) {
                    height: ( $submenu_item_height + $submenu_item_height_unit );
                }
                @if( $submenu_item_line_height != '' ) {
                    line-height: ( $submenu_item_line_height + $submenu_item_line_height_unit );
                }
                letter-spacing: ($submenu_text_letter_spacing + px);

                @if( $submenu_item_font_size != '' ) {
                    font-size: ( $submenu_item_font_size + $submenu_item_font_size_unit );
                }

                @if( $submenu_item_border_width != '' ) {
                    border-bottom: ( $submenu_item_border_width + $submenu_item_border_width_unit ) solid $submenu_item_border_color;
                } @else {
                    border-bottom: ( 0 + $submenu_item_border_width_unit ) solid $submenu_item_border_color;
                }

                @if( $submenu_item_font_family != '' ) {
                    font-family: $submenu_item_font_family;
                } @else {
                    font-family: inherit;
                }

                font-weight: $submenu_font_weight;
                color: $submenu_item_text_color;
                text-align: $submenu_item_text_alignment;
                background-color: $submenu_item_background_color;
                &:hover,
                &:focus {
                    color: $submenu_item_text_color_hover;
                    @if( $submenu_item_border_color_hover != '' ) {
                        border-color: $submenu_item_border_color_hover;
                    }
                    background-color: $submenu_item_background_color_hover;
                }
            }

            .rmp-menu-current-item {
                .rmp-menu-item-link {
                    color: $submenu_current_item_text_color;
                    @if( $submenu_current_item_border_color != '' ) {
                        border-color: $submenu_current_item_border_color;
                    }
                    background-color: $submenu_current_item_background_color;

                    &:hover,
                    &:focus {
                        color: $submenu_current_item_text_color_hover;
                        @if( $submenu_current_item_border_color_hover != '' ) {
                            border-color: $submenu_current_item_border_color_hover;
                        }
                        background-color: $submenu_current_item_background_color_hover;
                    }
                }
            }

            // If legacy setting is on then add these settings.
            @if( $is_legacy == 'on' ) {

                .rmp-menu-subarrow {

                    @if ( $submenu_item_toggle_position == 'left' ) {
                        left: 0;
                        border-left: unset;
                        border-right-style:solid;
                        border-right-color:$submenu_item_toggle_border_color;
                        border-right-width: ( $submenu_item_toggle_border_width + $submenu_item_toggle_border_width_unit );
                    } @else {
                        right: 0;
                        border-right: unset;
                        border-left-style:solid;
                        border-left-color:$submenu_item_toggle_border_color;
                        border-left-width: ( $submenu_item_toggle_border_width + $submenu_item_toggle_border_width_unit );
                    }

                    height: ($submenu_item_toggle_height + $submenu_item_toggle_height_unit);
                    line-height: ($submenu_item_toggle_height + $submenu_item_toggle_height_unit);
                    width: ( $submenu_item_toggle_width + $submenu_item_toggle_width_unit );
                    color: $submenu_item_toggle_text_color;
                    background-color: $submenu_item_toggle_background_color;

                    &:hover {
                        color: $submenu_item_toggle_text_color_hover;
                        border-color: $submenu_item_toggle_border_color_hover;
                        background-color: $submenu_item_toggle_background_color_hover;
                    }
                }

                .rmp-menu-subarrow-active {
                    color: $submenu_current_item_toggle_text_color;
                    border-color: $submenu_current_item_toggle_border_color;
                        background-color: $submenu_current_item_toggle_background_color;
                    &:hover {
                        color: $submenu_current_item_toggle_text_color_hover;
                        border-color: $submenu_current_item_toggle_border_color_hover;
                        background-color: $submenu_current_item_toggle_background_color_hover;
                    }
                }
            }
        }

        .rmp-menu-item-description {
            margin: 0;
            padding: 5px ( $menu_item_padding + $menu_item_padding_unit);
            opacity: 0.8;
            color: $menu_item_text_color;
        }

    }

    #{$menu_search_box_wrap} {

        display: block;

        @if( $menu_search_section_padding_top != '' ) {
           padding-top : $menu_search_section_padding_top;
        }

        @if( $menu_search_section_padding_left != '' ) {
            padding-left : $menu_search_section_padding_left;
        }

        @if( $menu_search_section_padding_bottom != '' ) {
            padding-bottom : $menu_search_section_padding_bottom;
        }

        @if( $menu_search_section_padding_right != '' ) {
            padding-right : $menu_search_section_padding_right;
        }

        .rmp-search-form {
            margin: 0;
        }

        .rmp-search-box {
            background: $menu_search_box_background_color;
            @if( $menu_search_box_border_color != '' ) {
                border: 1px solid $menu_search_box_border_color;
            }
            color: $menu_search_box_text_color;
            width: 100%;
            padding: 0 5%;

            @if( $menu_search_box_border_radius != '' ) {
                border-radius: $menu_search_box_border_radius;
            }

            height: ( $menu_search_box_height + $menu_search_box_height_unit );
            -webkit-appearance: none;
            &::placeholder {
                color : $menu_search_box_placeholder_color;
            }

            &:focus {
                background-color: $menu_search_box_background_color;
                @if( $menu_search_box_border_color != '' ) {
                    outline:2px solid $menu_search_box_border_color;
                }
                color: $menu_search_box_text_color;
            }
        }
    }

    /** Menu Title Style */
    #{$menu_title_wrap} {

        background-color: $menu_title_background;

        @if( $menu_title_font_color != '' ) {
            color: $menu_title_font_color;
        }

        @if( $menu_title_text_alignment != '' ) {
            text-align: $menu_title_text_alignment;
        }

        @if( $menu_title_font_size != '' ) {
            font-size: $menu_title_font_size;
        }

        @if( $menu_title_section_padding_top != '' ) {
            padding-top : $menu_title_section_padding_top;
        }

        @if( $menu_title_section_padding_left != '' ) {
            padding-left : $menu_title_section_padding_left;
        }

        @if( $menu_title_section_padding_bottom != '' ) {
            padding-bottom : $menu_title_section_padding_bottom;
        }

        @if( $menu_title_section_padding_right != '' ) {
            padding-right : $menu_title_section_padding_right;
        }

        @if( $menu_title_font_family != '' ) {
            font-family : $menu_title_font_family;
        }

        @if( $menu_title_font_weight != '' ) {
            font-weight: $menu_title_font_weight;
        }

        transition: background-color $color_transition_speed, border-color $color_transition_speed, color $color_transition_speed;

        &:hover {
            background-color: $menu_title_background_hover;
            color:$menu_title_font_color_hover;
        }

        & > .rmp-menu-title-link {
            color: $menu_title_font_color;
            width: 100%;
            background-color: unset;
            text-decoration: none;
            &:hover {
                color:$menu_title_font_color_hover;
            }
        }

        .rmp-font-icon {
            font-size: $menu_title_font_size;
        }

        .rmp-menu-title-image {

            @if( $menu_title_image_width != '' ) {
                width: $menu_title_image_width;
            }

            @if( $menu_title_image_height != '' ) {
                height: $menu_title_image_height;
            }
        }
    }

    /** Menu Additional Content Style */
    #{$menu_additional_content_wrap} {

        @if( $menu_additional_section_padding_top != '' ) {
            padding-top : $menu_additional_section_padding_top;
        }

        @if( $menu_additional_section_padding_left != '' ) {
            padding-left : $menu_additional_section_padding_left;
        }

        @if( $menu_additional_section_padding_bottom != '' ) {
            padding-bottom : $menu_additional_section_padding_bottom;
        }

        @if( $menu_additional_section_padding_right != '' ) {
            padding-right : $menu_additional_section_padding_right;
        }

        @if( $menu_additional_content_color != '' ) {
            color: $menu_additional_content_color;
        }

        @if( $menu_additional_content_alignment != '' ) {
            text-align: $menu_additional_content_alignment;
        }

        @if( $menu_additional_content_font_size != '' ) {
            font-size: ($menu_additional_content_font_size + $menu_additional_content_font_size_unit) ;
        }

    }
}
