@import "blocks/logo";
@import "blocks/main_menu";
@import "widgets/search";
@import "widgets/sections";
@import "widgets/banner";
@import "top-bar/top-bar";
@import "types/header-standard/_header-standard";
@import "types/header-vertical/_header-vertical";
@import "types/header-expanding/_header-expanding";

@import "types/mobile-header/_mobile-header";

$logo-area-height: 220px;
$menu-area-height: 85px;
$sticky-header-height: 65px;

.edgtf-page-header {

  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  width: 100%;
  z-index: 110;

    /* ==========================================================================
    #General header layout - start
    ========================================================================== */
    a img {
        display: block;
    }

    .edgtf-grid{
        height: 100%;

        .edgtf-vertical-align-containers{
            padding: 0;
            @include edgtfTransition(background-color 0.3s ease);
        }
    }

    /* ==========================================================================
    #General header layout - end
    ========================================================================== */

    /* ==========================================================================
    #Logo area styles - start
    ========================================================================== */
    .edgtf-logo-area {
        height: $logo-area-height;
        overflow: hidden;
        position: relative;

        .edgtf-logo-wrapper a {
            max-height: $logo-area-height;
        }
    }
    /* ==========================================================================
    #Logo area styles - end
    ========================================================================== */

    /* ==========================================================================
    #Menu area styles - start
    ========================================================================== */
    .edgtf-menu-area {
        height: $menu-area-height;
        position: relative;
        @include edgtfTransition(background-color 0.3s ease);

        .edgtf-logo-wrapper a {
            max-height: $menu-area-height;
        }
    }

    /* ==========================================================================
    #Menu area styles - end
    ========================================================================== */

    /* ==========================================================================
    #Sticky header styles - start
    ========================================================================== */
    .edgtf-sticky-header{
        height: $sticky-header-height;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        -webkit-transition: -webkit-transform 0.33s ease;
        transition: transform 0.3s ease;
        -webkit-backface-visibility: hidden;

        &.header-appear{
            transform: translateY(0%);
        }

        .edgtf-sticky-holder {
            height: 100%;
            background-color: $first-main-color;
            position: relative;
            z-index: 2;
			box-sizing: border-box;
        }

        .admin-bar &.header-appear{
            top: 32px;
        }

	    .edgtf-position-center-inner,
	    .edgtf-position-right:not(:nth-child(3)) .edgtf-position-right-inner,
        .edgtf-position-left-inner {
            height: 100%;
        }

        .edgtf-header-full-screen-logo-positon-center &,
        .edgtf-header-full-screen-logo-positon-left &{
            .edgtf-position-left .edgtf-position-left-inner,
            .edgtf-position-center .edgtf-position-center-inner{
                height: auto;
            }
        }

        &.edgtf-sticky-header-menu-left {
            .edgtf-position-right .edgtf-position-right-inner {
                height: auto;
            }
        }

        .edgtf-sticky-holder .edgtf-logo-wrapper{
            a {
                max-height: $sticky-header-height;
            }
        }

        .edgtf-sticky-right{
            display: inline-block;
            vertical-align: middle;
        }

        .edgtf-search-opener,
        .edgtf-side-menu-button-opener {
        	color: #fff;
        }

        .edgtf-side-menu-button-opener .edgtf-side-menu-icon .edgtf-line,
        .edgtf-side-menu-button-opener .edgtf-side-menu-icon:after,
        .edgtf-side-menu-button-opener .edgtf-side-menu-icon:before {
            background-color: #fff;
        }

        .edgtf-shopping-cart-outer .edgtf-shopping-cart-header{
        	.edgtf-cart-icon{
        		color: #fff;
        	}

        	.edgtf-cart-amount{
        		color: $first-main-color;
        		background-color: #fff;
        	}
        }
        
		.edgtf-menu-appear .edgtf-line{
            &:hover{
                .edgtf-line{
                    background-color: $gray-color;
                }
            }
            .edgtf-line{
                background-color: #fff;
            }			
		}
		.edgtf-fullscreen-menu-opener .edgtf-fullscreen-icon{
            color: #fff;
		}
    }

    /* ==========================================================================
    #Sticky header styles - start
    ========================================================================== */

    /* ==========================================================================
    #Fixed header styles - start
    ========================================================================== */
    .edgtf-fixed-wrapper.fixed{
        width: 100%;
        position: fixed;
        left: 0px;
        top: 0px;
        -webkit-backface-visibility: hidden;
    }

    /* ==========================================================================
    #Fixed header - end
    ========================================================================== */
}

/* ==========================================================================
#Light header - begin
========================================================================== */

.edgtf-light-header{

    .edgtf-logo-area,
    .edgtf-menu-area,
    .edgtf-vertical-menu-area{
        color: $header-light-color !important; //Beacause of inline color styles

        .widget {
			color: $header-light-color !important; //Beacause of inline color styles

            p,
            a,
            span,
            i,
            .widgettitle {
                color: $header-light-color !important; //Beacause of inline color styles
            }

        }

        .edgtf-light-logo{
            opacity: 1;
        }

        .edgtf-dark-logo,
        .edgtf-normal-logo{
            opacity: 0;
        }

    }
}

/* ==========================================================================
#Light header - end
========================================================================== */

/* ==========================================================================
#Dark header - begin
========================================================================== */

.edgtf-dark-header{

    .edgtf-logo-area,
    .edgtf-menu-area,
    .edgtf-vertical-menu-area{
        color: $header-dark-color !important; //Because of inline color styles

        .widget {
			color: $header-dark-color !important; //Beacause of inline color styles

            p,
            a,
            span,
            i,
            .widgettitle {
                color: $header-dark-color !important; //Beacause of inline color styles
            }

        }

        .edgtf-dark-logo{
            opacity: 1;
        }

        .edgtf-normal-logo,
        .edgtf-light-logo{
            opacity: 0;
        }

    }

}

/* ==========================================================================
#Dark header - end
========================================================================== */