@import "blocks/_logo";
@import "blocks/_widgets";
@import "blocks/navigation/_navigation";

$closed-vertical-menu-width: 70px;

.edge-header-vertical-closed {
    .edge-content,
    footer{
        padding-left: $closed-vertical-menu-width;
        box-sizing: border-box;
    }

	.edge-vertical-menu-area {
        position: fixed;
        width: $vertical-menu-width;
        top: 0;
        left: calc(#{$closed-vertical-menu-width} - #{$vertical-menu-width});
        padding: 70px 0 58px 60px;
        background-color: #fafafa;
        height: 100%;
        z-index: 101;
        -webkit-backface-visibility: hidden;
	    box-sizing: border-box;
        outline: none;
		@include edgeTransition(left .15s ease-out);

		.edge-vertical-area-opener {
			position: fixed;
			width: $closed-vertical-menu-width;
			height: $closed-vertical-menu-width;
			left: 0;
			top: 0;
			z-index: 1000;

			.edge-vertical-area-opener-line {
				position: absolute;
				top: 50%;
				left: 50%;
				display: block;
				margin-left: -10px;
				width: 20px;
				height: 1px;
				background-color: $first-main-color;
				@include edgeTransition(all .3s cubic-bezier(0.585,-0.600,0.430,1.650));

				&: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-vertical-menu {
			opacity: 0;
			@include edgeTransition(opacity .15s ease-out);

			.second {
				.inner {
					ul {
						li {
							a {
								text-transform: none;
							}
						}
					}
				}
			}
		}

	    &.active {
		    left: 0;
		    .edge-vertical-area-opener {

				left: 0;

			    .edge-vertical-area-opener-line {
				    background-color: transparent;
					height: 0;

				    &:before {
					    @include edgeTransform(rotate(45deg) translate(3px,8px));
					    top: -11px;
				    }
				    &:after {
					    @include edgeTransform(rotate(-45deg) translate(3px,-8px));
					    bottom: -5px;
				    }

			    }
		    }

		    .edge-vertical-menu {
			    opacity: 1;
		    }
	    }


    }

    .edge-vertical-menu-area-inner {
        @include edgeRelativeHolderLayout();
        height: 100%;
    }

    &.admin-bar .edge-vertical-menu-area {
        top: 33px;
    }

    .edge-vertical-menu-area.edge-with-scroll {
        overflow: hidden;
    }

    .edge-vertical-area-background {
        position: fixed;
        width: $vertical-menu-width;
        height: 100%;
        background-position: right top;
        background-repeat: no-repeat;
        background-color: #fafafa;
        background-size: cover;
        top: 0;
	    left: calc(#{$closed-vertical-menu-width} - #{$vertical-menu-width});
        z-index: 0;
        opacity: 1;

        @include edgeTransition(opacity 0.5s ease, background-color 0.5s ease, left .3s ease);
    }

	.active .edge-vertical-area-background {
		left: 0;
	}

	.edge-vertical-area-bottom-logo {
		top: $closed-vertical-menu-width;
		left:0;
		position: fixed;
		width: $closed-vertical-menu-width;
		height: 100%;
		text-align: center;
		bottom: 25px;
		z-index: 1000;
		@include edgeTransition(left .15s ease-in-out);

		.edge-vertical-area-bottom-logo-inner {
			position: absolute;
			bottom: 112px;
			box-sizing: border-box;
			text-align: center;
			width: 100%;
		}

		&.active {
			left: - $closed-vertical-menu-width;;
		}

	}
	
}