.no-js {
  	.toggle-main-navigation{display:none;}
}

/*
.pre-icon{position:fixed;left:0px;top:0px;width:100%;height:100%;z-index:9999;opacity:1;visibility:visible;background:$white;z-index:90;}
.fadeOut{animation:fadeOut 1s;animation-delay:0.5s;animation-fill-mode:forwards;}

@keyframes fadeOut{
	from{opacity:1;}
	to{visibility:hidden;opacity:0;}
}
*/

/*
 * Top navigation
 */
header{
	position:relative;
	z-index:1000;
	left:0;
	right:0;
	background:$white;
	
	
	.top-bar{
		
		@include has-shadow();
		position:relative;
		z-index:100;
		
		.top-bar-left{
			position:relative;
			.logo{
				svg{
					height:2.5rem;
					display:block;
					padding-left:0.5rem;
					@include breakpoint(small only){
						padding:0;
					}
				}
			}
			.toggle-main-navigation{
				
				position:absolute;
				top:0.5rem;
				right:0;
				
				// toggle navigation
				.toggle-menu{
	
					float:right;position:relative;width:1.5rem;height:1.5rem;padding:0;transform:rotate(0deg);transition:.5s ease-in-out;cursor:pointer;

					span{display:block;position:absolute;height:0.125em;width:100%;background:$black;opacity:1;left:0;transform:rotate(0deg);transition:.25s ease-in-out;}
					span:nth-child(1){top:0.125em;}
					span:nth-child(2),
					span:nth-child(3){top:0.625em;}
					span:nth-child(4){top:1.125em;}
		
					&.open span:nth-child(1){top:18px;width:0%;left:50%;}
					&.open span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
					&.open span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
					&.open span:nth-child(4){top:18px;width:0%;left:50%;}

				}
			}
	
	
		}
		
		.top-bar-right{
			
			li.section{
				a{
					color:$black;
					font-weight:$global-weight-bold;
					position:relative;
					&:hover,
					&.link__active{
						&::after{content:"";border-bottom:solid 0.125rem $primary-color;position:absolute;bottom:-0.75rem;left:$global-padding;right:$global-padding;}
					}
					//&:hover::after{border-bottom:solid 0.25rem $white;}
				}
			}
			
			li.section__search{border-right:solid 1px $light-gray;}
			li.section__account a{padding-right:0.5rem;}
			li.section__cart a{
				padding-left:0.5rem;
				
				span.counter{content:"0";background:$primary-color;width:1rem;height:1rem;padding-top:0.125rem;color:$white;position:absolute;top:0.25rem;right:0.5rem;border-radius:50%;text-align:center;font-size:0.625rem;line-height:0.75rem;}

				span.added-to-cart{

					@include animate();
				    animation-name: bounceIn;
					animation-delay: 1s;
				    animation-duration: 2s;
	 
					background:$primary-color;
				    position: absolute;
				    z-index: 1000;
	
				}
				
			}
			
			li.section__search,
			li.section__account,
			li.section__cart{
				
				a::after{display:none;}
				
				a:hover{color:$primary-color;}
				a:hover::after{display:none;}
			}
			
			
		
		}
	}
			
	
	@include breakpoint(medium down)
	{
		
	//	position:fixed;
	//	box-shadow:0 0 1.5rem rgba($black,0.25);
	//	z-index:100;
		
		
		.top-bar{
			.top-bar-right,
			.top-bar-left{
				flex: 0 0 100%;
				max-width: 100%;
			}
			
			.top-bar-left{
				
			}
			
			.top-bar-right{
				min-height:100vh;
				ul{margin:3rem 0 1.5rem 0;}
				ul li{border-bottom:solid 1px rgba($white,0.1);text-align:center;}
				ul li:last-child{border:none;margin-left: 0;background:none;}
				ul li a{font-size:1.25rem;margin:0;display:block;padding:1.5rem 0;background:none;}			
			}
			
		}
		
		

		
	}
	

}