@import "blocks/_mobile-navigation";

/* ==========================================================================
#Mobile header styles
========================================================================== */
.edge-mobile-header {
    display: none;
    position: relative;
    z-index: 101; /* one more thatn the content */

    .edge-mobile-side-area {
        background-color: $header-light-color;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        padding: 30px 70px 121px;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        right: 0px;
        width: 340px;
        z-index: 9999;
        -webkit-backface-visibility: hidden;
        @include edgeTransform(translate3d(340px, 0,0));
        @include edgeTransition(transform .7s cubic-bezier(0.25,1,.2,1));

        .edge-social-icon-widget-holder {
            .edge-social-icon-widget {
                color: #fff;
                font-size: 15px;
            }
        }

        .widget_text {
            margin-bottom: 5px;
        }

        &.opened{
            @include edgeTransform(translate3d(0,0,0));

            .edge-mobile-nav,
            .edge-mobile-menu-bottom {
                @include edgeTransform(translateX(0px));
                opacity: 1;
            }
        }

        .edge-mobile-side-area-inner{
            height: 100%;
            min-height: 100%;
            overflow: hidden;

        }

        .edge-close-mobile-side-area-holder {
            display: block;
            position: absolute;
            top: 33px;
            right: 45px;
            z-index: 1000;
            cursor: pointer;

            .edge-mo-line {

                &:before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 1px;
                    background-color: $first-main-color;
                    left: 0;
                    @include edgeTransform(rotate(45deg) translate(3px,8px));
                    top: 9px;
                    @include edgeTransition(all .3s cubic-bezier(0.585,-0.600,0.430,1.650));
                }
                &:after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 1px;
                    background-color: $first-main-color;
                    left: 0;
                    @include edgeTransform(rotate(-45deg) translate(3px,-8px));
                    bottom: -7px;
                    @include edgeTransition(all .3s cubic-bezier(0.585,-0.600,0.430,1.650));
                }

            }

            span {
                display: inline-block;
                height: 19px;
                width: 19px;
                position: relative;
            }
        }

        .edge-mobile-menu-bottom {
            color: #fff;
            .textwidget {
                color: #a5a5a5;
                font-size: 12px;
                letter-spacing: 0.1em;
            }
        }
    }

    /* #General mobile header styles
    ========================================================================== */
    .edge-mobile-header-inner {
        position: relative;
        height: 100px;
        background-color: #fff;
        box-sizing: border-box;

        .edge-mobile-header-holder {
            position: relative;
            z-index: 2;
            height: 100%;
        }
    }

    .edge-grid {
        height: 100%;
    }

    .edge-vertical-align-containers {
        padding: 0;
    }

    /* #End of general mobile header styles
   ========================================================================== */

    /* #Mobile logo styles
    ========================================================================== */
    .edge-mobile-logo-wrapper a {
        display: block;
    }

    .edge-mobile-logo-wrapper img {
        height: 100%;
        width: auto;
    }
    /* #End of mobile logo styles
    ========================================================================== */

    /* #Mobile menu opener styles
    ========================================================================== */
    .edge-mobile-menu-opener {
        float: left;
        position: relative;
        z-index: 2;
        height: 100%;

        a {
            display: table;
            height: 100%;
            padding-right: 10px;

            .edge-mo-lines {
                position: relative;
                display: inline-block;
                vertical-align: middle;
                width: 20px;
                height: 1px;

                .edge-mo-line {
                    position: absolute;
                    left: 0;
                    height: 1px;
                    width: 100%;
                    background-color: $default-heading-color;
                    -webkit-transition: -webkit-transform .3s ease, top .2s ease-out, background-color .2s ease-out;
                    -moz-transition: -moz-transform .3s ease, top .2s ease-out, background-color .2s ease-out;
                    transition: transform .3s ease, top .2s ease-out, background-color .2s ease-out;

                    &:before {
                        content: '';
                        position: absolute;
                        width: 100%;
                        height: 1px;
                        background-color: $first-main-color;
                        left: 0;
                        top: -6px;
                        @include edgeTransition(all .3s cubic-bezier(0.585,-0.600,0.430,1.650));
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        width: 100%;
                        height: 1px;
                        background-color: $first-main-color;
                        left: 0;
                        bottom: -6px;
                        @include edgeTransition(all .3s cubic-bezier(0.585,-0.600,0.430,1.650));
                    }

                    &.edge-line-1 {
                        top: 0;
                    }

                    &.edge-line-2 {
                        top: calc(50% - 1px);
                        top: -moz-calc(50%); //moz pixel move fix
                        outline:1px solid transparent; //moz pixelation fix
                    }

                    &.edge-line-3 {
                        top: calc(100% - 1px);
                    }
                }
            }

            .edge-mobile-menu-text {
                position: relative;
                top: 0;
                margin: 0;
                padding-left: 3px;
            }

            &:hover {

                .edge-mo-lines .edge-mo-line {

                    &.edge-line-1,
                    &.edge-line-3 {
                        top:50%;
                    }

                    &.edge-line-2 {
                        @include edgeTransform(rotate(90deg));
                    }
                }
            }
        }

        .edge-mo-icon-holder {
            display: table-cell;
            vertical-align: middle;
            line-height: 1em;

            > * {
                display: inline-block;
                vertical-align: middle;
            }
        }
    }
    /* #End of mobile menu opener styles
    ========================================================================== */
}

/* ==========================================================================
#End of mobile header styles
========================================================================== */

/* ==========================================================================
#Sticky mobile header styles
========================================================================== */
.edge-sticky-up-mobile-header {
    .edge-animate-mobile-header {
        .edge-mobile-header-inner {
            width: 100%;

            //Added left and right transition values because of sidearea transitions on open/close
            -webkit-transition: -webkit-transform 0.4s ease-in-out, left 0.2s ease, right 0.2s ease;
            -moz-transition: -moz-transform 0.4s ease-in-out, left 0.2s ease, right 0.2s ease;
            -o-transition: -o-transform 0.4s ease-in-out, left 0.2s ease, right 0.2s ease;
            transition: transform 0.4s ease-in-out, left 0.2s ease, right 0.2s ease;
            @include edgeTransform(translateY(-100%));
        }
    }

    .mobile-header-appear {
        .edge-mobile-header-inner {
            top: 0;
            left: 0;
            width: 100%;
            position: fixed;
            @include edgeTransform(translateY(0));
        }
    }
}
/* ==========================================================================
#End of sticky mobile header styles
========================================================================== */