/**
 * 
 * Gestion du menu CSS 
 *
 * @version 1.0
 */ 
 
/* Menu
------------*/ 
.main_menu
{
	width: $menuOpen;
	height: 100%;
	position: fixed;
	color:#fff;
	white-space: nowrap;
	z-index: 11;
	//Positionnement du menu en superposition du header en rwd
	@include mq($to: phone)
	{
		width: $menuOpen; 
		box-sizing : border-box;
		top:0; 
		z-index:10002; //afin de pouvoir passer au dessus du header, valeur haute à cause de certain plugin JS
	}
	//Position du menu quand il est fermé
	.menu-close &
	{
		width: $menuClose;
		@include mq($to: phone){left:-$menuOpen;}		
	}	
	
	& .tinyscroll_viewport
	{
		background-color: $menuColor;
	}
	//Element du menu
	& .main_menu--item 
	{
	  	display: block;
		//@include px2em($px: $fontSize * 2.46, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : height) ;
		//@include px2em($px: $fontSize * 2.46, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : line-height);
		@include rem((
			height		:$fontSize * 2.46,
			line-height	:$fontSize * 2.46
		)); 
	  	padding:10px 8px;
	  	position: relative;
	  	font-size:0.8em;
		color:#fff;
		text-transform: uppercase;	
		text-decoration: none;
		cursor: pointer;
		outline: none;
		
		&:before
		{
			display: block;
			content: "";
		  	vertical-align: middle;
		  	height: 52px;
		  	width: 6px;
		  	position: absolute;
		  	top:52px;
		  	left: 0;
		}
			  	
	  	& .icon
	  	{
		  	margin:0 7px 0 7px;
			color:#fff;
			opacity:1;
			vertical-align:middle;
			//@include px2em($px: $fontSize * 2.46, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : font-size); 
			//@include px2em($px: $fontSize * 2.46, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : width) ;
			//@include px2em($px: $fontSize * 2.46, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : height) ;
			@include rem((
				width		:$fontSize * 2.46,
				height		:$fontSize * 2.46,
				font-size	:$fontSize * 2.46
			));

	  	}
	  	.no-touch &:hover
		{
			text-decoration: none;
			//background-color: rgba(255, 255, 255, 0.20); // #6B7880
			@include background-color-rgba($color : #fff, $opacity : .20);
			&:before
			{
				top:0;
				background-color: $toolbarActionColor; // #00b2e0
			}
		}
		&.active
		{			
			text-decoration: none;
			@include background-color-rgba($color : #fff, $opacity : .20);
			&:before
			{
				top:0;
				background-color: $toolbarActionColor;
			}		
		}
	}
	//Label du menu
	& .main_menu--label
	{
		//Etat des label quand le menu est fermé
		.menu-close & 
		{
			display: none;
		}
	}
	
	/* Sous-Liste secondaire
	--------------------------*/
	/*& .main_menu--dropdown_target
	{
		position: static;
		display: none;
		background-color: $colorMain;
		& > *
		{
			padding: 0 0 0 20px;
		}	
		.menu-close &
		& > *
		{
			padding: 0;
		}	
	}	
	
	& .main_menu--item_child 
	{
	  	display: block;
	  	height: 16px;
	  	overflow: hidden;
	  	line-height: 16px;
	  	padding:10px 8px 10px 8px;
	  	position: relative;	 
		font-size:0.6em;
		color:$colorMenu;
		background-color: $colorMain;
		text-transform: uppercase;
		text-decoration: none;
		outline: none;
		
		.menu-close &
		{
			padding-left:15px;
			& span + span
			{
				display: none;
			}
		}
		&:before
		{
			display: block;
			content: "";
		  	vertical-align: middle;
		  	height: 36px;
		  	width: 6px;
		  	position: absolute;
		  	top:36px;
		  	left: 0;			
		}		
		&:hover
		{
			color: black;
			background-color: white;
			&:before
			{
				top:0;
				background-color: #00b2e0;				
			}	
		}
		&.active
		{			
			background-color: white;
			text-decoration: none;
			color: black;
			& [class*="icon-small-"]
	
			{
				opacity: 1;
			}
			&:before
			{
				top:0;
				background-color: #00b2e0;
			}		
		}	
	}*/
	
	//Bouton d'ouverture/fermeture du menu
	#menu-collapse-btn
	{
		margin-top: 24px;
		margin-left: 22px;
	}
	& .main_menu--collapse_btn
	{
		@extend %icon-style;
		@include mq($to: phone){display: none;}
		//icon
		&:before
		{
			@extend .icon-indent-decrease:before;		
		}
		//Cas du menu fermé
		.menu-close & 
		{
			//On modifie l'icon
			&:before
			{
				@extend .icon-indent-increase:before;		
	
			}
		}
	}
}