/* Header mobile sidebar */

$menu_sidebar_width: 360px;
$menu_sidebar_active_z_index: 999900;
$menu_sidebar_content_max_width: 48em;
$menu_sidebar_content_gutter: 1.5em;
$menu_sidebar_boxshadow: 0px 0px 10px 0px rgba(0,0,0,0.4);

/* - General */
.body-y-hidden {
    overflow: hidden !important;
}
#page {
    transition: transform .7s ease;
}

body {
    &:before {
        transition: all .5s linear;
        position: fixed;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        z-index: -1;
        content: " ";
        background: rgba( 0, 0, 0, .5 );
        visibility: hidden;
        opacity: 0;
    }
    &.menu_sidebar_dropdown {
        &:before {
            display: none;
        }
    }
}

.header-menu-sidebar {
    padding: 0;
    position: fixed;
    width: 100%;
    max-width: 100%;
    top: 0;
    z-index: $menu_sidebar_active_z_index;
    visibility: hidden;

    .builder-item-sidebar {
        padding: 1.4em 1.5em;
        border-bottom: 1px solid transparent;
        &:last-of-type {
            border-bottom: none;
        }
        &.mobile-item--primary-menu, &.mobile-item--secondary-menu, &.mobile-item--menu {
            padding: 0px;
        }
    }
    .nav-menu-mobile .nav-toggle-icon {
        color: currentColor;
        &:hover, &:focus {
            background: rgba(0,0,0,0.01);
        }
    }

    // Light mode
    &.light-mode {
        .sub-menu a,
        .cart-item-link,
        .item--html a,
        .nav-menu a {
            color: $dark_color_link;
            &:hover {
                color: $dark_color_link_hover;
            }
        }
        .cart-icon {
            color: $dark_color_link_hover;
        }
        //a:not(.starterblog-btn) {
        //    color: $dark_color;
        //    &:hover {
        //        color: $dark_color_link_hover;
        //    }
        //}
        .builder-item-sidebar {
            border-color: $dark_color_border;
            &:before {
                background: $dark_color_border;
            }
        }
        .header-menu-sidebar-bg {
            &:before {
                background: $light_bg;
            }
        }
        .nav-menu-mobile .menu li a, .sub-menu, .nav-menu-mobile .nav-toggle-icon { border-color: $dark_color_border }
        .nav-menu-mobile .nav-toggle-icon {
            &:hover, &:focus {
                background: rgba(0,0,0,0.01);
            }
        }
        .menu {
            li {
                border-color: $dark_color_border;
            }
        }
    }

    // Dark mode
    &.dark-mode {
        .sub-menu a,
        .cart-item-link,
        .item--html a,
        .nav-menu a, .nav-menu .nav-toggle-icon {
            color: $light_color_link;
            &:hover {
                color: $light_color_link_hover;
            }
        }
        .cart-icon {
            color: $light_color_link_hover;
        }
        .builder-item-sidebar {
            border-color: $light_color_border;
            &:before {
                background: $light_color_border;
            }
        }
        .header-menu-sidebar-bg {
            &:before {
                background: $dark_bg;
            }
        }
        .nav-menu-mobile .menu li a, .sub-menu, .nav-menu-mobile .nav-toggle-icon { border-color: $light_color_border }
        .nav-menu-mobile .nav-toggle-icon {
            &:hover, &:focus {
                background: rgba(0,0,0,0.01);
            }
        }
        .menu {
            li {
                border-color: $light_color_border;
            }
        }
    }
}


.header-menu-sidebar-bg {
    position: relative;
    word-wrap: break-word;
    min-height: 100%;
    display: block;
    &:before {
        content: "";
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        display: block;
        min-height: 100%;
    }
}
.header-menu-sidebar-inner {
    position: relative;
    word-wrap: break-word;
    min-height: 100%;
    display: block;
    padding: 1.2em 0;
}

/* Type : Overlay */
.menu_sidebar_slide_overlay {
    .header-menu-sidebar {
        box-shadow: none;
        transition: all .5s linear;
        z-index: 0;
        opacity: 0;
        top: 0px;
        width: 100%;
        right: 0px;
        bottom: 0px;
    }

    .builder-item-sidebar {
        text-align: center;
        padding: 2em 1.5em;
        border: none;
        position: relative;
        &:before {
            content: "";
            width: 8%;
            height: 2px;
            display: block;
            background: $light_color_border;
            position: absolute;
            bottom: 0px;
            left: 46%;
            @include mq(max-md) {
                width: 16%;
                left: 42%;
            }
        }
        &:last-child {
            &:before {
                content: none;
            }
        }
        &[class*="-menu"] {
            padding: 2.5em 1.5em;
        }
    }

    // Menu style
    .nav-menu-mobile {
        .menu {
            li {
                a {
                    border: none;
                    font-size: 140%;
                    text-transform: uppercase;
                    font-weight: 500;
                    .nav-toggle-icon {
                        display: inline-block;
                        position: relative;
                        border: 0px none;
                        margin-right: -1.3em;
                        top: -2px;
                        padding: 0.28em 0.5em;
                    }
                }
            }
        }
        .sub-menu {
            border: none;
            li {
                a {
                    text-transform: none;
                    padding: 0.35em 1.5em;
                    font-size: 100%;
                }
            }
        }
    }

    .header-menu-sidebar-bg {
        position: absolute;
        top: 0px; left: 0px; width: 100%;
    }
    .header-menu-sidebar-inner {
        max-width: $menu_sidebar_content_max_width;
        margin: ( $menu_sidebar_content_gutter * 2) auto;
        padding: 0;
    }
    .dark-mode {
        .header-menu-sidebar-bg {
            &:before {
                background: $dark_bg;
            }
        }
    }
    .light-mode {
        &.close-sidebar-panel {
            .hamburger-inner {
                background: $dark_color;
                &:before, &::after {
                    background: inherit;
                }
            }
            &:hover {
                .hamburger-inner {
                    background: $dark_color_link_hover;
                }
            }
        }
    }
}

/* Type: Slide from left */
.menu_sidebar_slide_left {
    .header-menu-sidebar {
        box-shadow: $menu_sidebar_boxshadow;
        width: $menu_sidebar_width;
        left: 0;
        transform: translate3d( - 100% ,0,0);
        transition: transform .5s cubic-bezier(.79,.14,.15,.86);
        @include mq( max-xs ) {
            width: auto;
            right: 45px;
        }
    }
}

/* Type: Slide from right */
.menu_sidebar_slide_right {
    .header-menu-sidebar {
        box-shadow: $menu_sidebar_boxshadow;
        transition: transform .5s cubic-bezier(.79,.14,.15,.86);
        transform: translate3d( 200%,0,0);
        width: $menu_sidebar_width;
        right: 0;
        @include mq( max-xs ) {
            width: auto;
            left: 45px;
        }
    }
}

/* Type: Toggle dropdown */
.menu_sidebar_dropdown {
    .header-menu-sidebar {
        position: relative;
        ///transition: all .5s linear;
        height: 0px;
        display: block;
        visibility: visible;
        z-index: $menu_sidebar_active_z_index;
        overflow: hidden;
    }

    .header-menu-sidebar-inner {
        max-width: $menu_sidebar_content_max_width;
        margin: 0 auto;
    }
    .header-menu-sidebar-bg {
        &:before {
            box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.05);
        }
    }
}

/* Hiding Menu Sidebar animation. */
.hiding-header-menu-sidebar {
    overflow-x: hidden;
    position: relative;
    width: 100%;
    display: block;
    &.menu_sidebar_slide_overlay {
        .header-menu-sidebar {
            z-index: 0;
            opacity: 0;
            height: 100%;
        }
    }
    &.menu_sidebar_slide_left{
        .header-menu-sidebar {
            height: 100%;
            transform: translateX(-100%);
            transition: transform .5s cubic-bezier(.79, .14, .15, .86);
        }
    }
    //left: 0;
    .header-menu-sidebar {
        visibility: visible;
    }

    &.menu_sidebar_slide_right {
        .header-menu-sidebar {
            transform: translateX(200%);
            height: 100%;
        }
    }
}

/* Showing Menu Sidebar animation. */
.is-menu-sidebar, .is-mobile-form-panel {
    //overflow: hidden;
    overflow-x: hidden;
    #wpadminbar {
        // display: none;
    }
    #page {
        // position: fixed;
        // transform: scale3d(.9,.9,.9);
        // box-shadow: 0 0 46px #000;
    }
}

.is-menu-sidebar {
    //overflow: hidden;
    .header-menu-sidebar {
        overflow: auto;
    }
    &.menu_sidebar_slide_overlay {
        overflow: initial;
        position: relative;
        width: 100%;
        display: block;
        .header-menu-sidebar {
            z-index: $menu_sidebar_active_z_index;
            opacity: 1;
            visibility: visible;
        }
        .menu-mobile-toggle {
            opacity: 0;
        }
    }
    &.menu_sidebar_slide_left {
        overflow: initial;
        position: relative;
        width: 100%;
        display: block;
        .header-menu-sidebar {
            z-index: $menu_sidebar_active_z_index;
            height: 100vh;
            transform: translate3d(0, 0, 0);
            left: 0;
            visibility: visible;
        }
        .menu-mobile-toggle {
            opacity: 0;
        }
    }
    &.menu_sidebar_slide_right {
        overflow: initial;
        position: relative;
        width: 100%;
        display: block;
        .header-menu-sidebar {
            z-index: $menu_sidebar_active_z_index;
            height: 100vh;
            max-width: 100vw;
            transform: translate3d(0, 0, 0);
            right: 0;
            visibility: visible;
        }
        .menu-mobile-toggle {
            opacity: 0;
        }
    }
    &.menu_sidebar_dropdown {
        //overflow: hidden;
        .header-menu-sidebar {
            z-index: 10;
            //height: auto;
            visibility: visible;
        }
    }
}


/* Close Button */
$close_size: 35px;
.close-sidebar-panel {
    display: none;
    z-index: $menu_sidebar_active_z_index + 10;
    cursor: pointer;
    position: fixed;
    top: 10px;
    right: 12px;
    .hamburger-inner {
        background: $light_color;
        &:before, &::after {
            background: inherit;
        }
    }
    &:hover {
        .hamburger-inner {
            background: $light_color_link_hover;
        }
    }
}
.menu_sidebar_slide_right {
    .close-sidebar-panel {
        top: 10px;
        right: auto;
        left: 12px;
    }
}

.menu_sidebar_dropdown {
    .close-sidebar-panel {
        display: none !important;
    }
}

.is-menu-sidebar, .is-mobile-form-panel {
    //transform-origin: 35px 50px 0;
    //box-shadow: 0 0 46px #000;
    &:before {
        z-index: $menu_sidebar_active_z_index - 3;
        visibility: visible;
        opacity: 1;
    }
    .close-sidebar-panel {
        display: inline-block;
    }
}

/* - Item showing animation  */
.header-menu-sidebar {
    .item--inner {
        transition: transform .3s, opacity .3s;
        transform: translateY(45px);
        opacity: 0;
        //transition-delay: .2s;
    }
}
.is-menu-sidebar, .is-mobile-form-panel {
    .header-menu-sidebar {
        .item--inner {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
.mobile-item--search_box{
	.search-form-fields{
		width: 100%;
	}
}