@import "mixins";
/**
 * Flyout Menu styling
 */
 .ast-flyout-above-menu-enable{
 	&.ast-header-break-point {
 		&.ast-flyout-above-left-side {
 			.ast-above-header-navigation-wrap {
				left: 0;
				.ast-above-header-navigation {
					left: -100%;
				}
			}	
 		}
 		&.ast-flyout-above-right-side{
 			.ast-above-header-navigation-wrap {
				right: 0;
				.ast-above-header-navigation {
					right: -100%;
				}
			}	
 		}

 		.ast-above-header-menu {
 			margin: 0;
 		}

 		.ast-above-header-section-separated .ast-above-header-navigation {
			top: 0;
		    transform: none;
		}

		.ast-above-header-navigation-wrap {
			width: 100%;
			top: 0;
			position: fixed;
			height: 100%;
			background: rgba(0,0,0,.4);
			z-index: 100000;
			visibility: hidden;
			opacity: 0;
			transition: .25s ease-in-out;
			display: block !important;
			margin: 0;
			z-index: 5;
			.close {
				position: absolute;
				right: 8px;
				top: 6px;
				line-height: 1;
				cursor: pointer;
				z-index: 10;
				opacity: 0.8;

				&:hover {
					opacity: 1;
				}
				
				&:after {
					content: "\e5cd";
					display: inline-block;
					font-family: 'Astra';
					font-size: 28px;
					text-rendering: auto;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					line-height: normal;
				}
			}

			.ast-above-header-navigation {
				position:  absolute;
				background: #fff;
				height: 100%;
				top: 0;
				box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);
				overflow-y: auto;
				transition: .3s ease-in-out;
				padding: 40px 0;
				margin: 0;
				left: auto;
				@media (max-width: $mx-col-sm) {
					width: 70%;
				}
				ul{
					background: transparent !important;
				}

			}
			div.ast-masthead-custom-menu-items{
				text-align: initial;
			}
		}
		.ast-button-wrap {
			.menu-above-header-toggle.toggled {
				.menu-toggle-icon:before {
				  content: "\e5d2";
				}
			} 
		}

		/* Fixed Header markup override the main header markup which don't allow to click on menu while the header is not sticky */
		#ast-fixed-header.ast-sticky-active .ast-above-header-navigation-wrap {
		    display: block !important;
		}
		#ast-fixed-header .ast-above-header-navigation-wrap {
		    display: none !important;
		}
	}
}
.ast-flyout-above-menu-overlay {
	.ast-flyout-above-menu-enable {
		&.ast-header-break-point{
			.site-header{
	 			z-index: 100000;
	 		}
	 		#ast-fixed-header.ast-sticky-active {
	 			height: 100%;
	 			z-index: 100000;
	 		}
	 		.ast-above-header {
	 			z-index: 99;
	 		}
			&.ast-flyout-above-left-side{
				.ast-above-header-navigation-wrap {
					.ast-above-header-navigation {
						left: 0;
					}	
				}
			}
			&.ast-flyout-above-right-side{
				.ast-above-header-navigation-wrap {
					.ast-above-header-navigation {
						right: 0;
					}	
				}
			}
			.ast-above-header-navigation-wrap {
				visibility: visible;
				opacity: 1;
				z-index: 5;

				div.ast-masthead-custom-menu-items {
					padding-left: 20px;
					padding-right: 20px;
				}
			}
		}
	}
}

// Sticky Header - Hide on scroll height transition animation remove.
.ast-header-stick-slide-active,
.ast-header-stick-scroll-active {
	.ast-flyout-above-menu-enable.ast-header-break-point {
		#masthead {
			.ast-above-header-navigation {
		  		display: none !important;
		  	}
		}
		#ast-fixed-header{
			.ast-above-header-navigation{
				transition: opacity .25s ease-in-out, visibility .3s ease-in-out;
			}
		}
	}
}
