/**
 * 
 * Gestion du menu CSS 
 *
 * @version 1.0
 */ 
 
/* Menu
------------*/ 
.main_menu
{
	width: $menuOpen;
	height: 100%;
	position: fixed;
	color:#fff;
	white-space: nowrap;
	z-index: 11;	  
	
	& .tinyscroll_viewport
	{
		background-color: $menuColor;
	}
	
	& .main_menu--item 
	{
	  	display: block;
	  	height: 32px;
	  	line-height: 32px;
	  	padding:10px 8px;
	  	position: relative;
	  	font-size:0.8em;
		color:white;
		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;
	  	}
	  	&:hover
		{
			text-decoration: none;
			background-color: rgba(255, 255, 255, 0.20); // #6B7880
			&:before
			{
				top:0;
				background-color: $toolbarActionColor; // #00b2e0
			}
		}
		&.active
		{			
			text-decoration: none;
			background-color: rgba(255, 255, 255, 0.20);			
			&:before
			{
				top:0;
				background-color: $toolbarActionColor;
			}		
		}
	}
	
	/* Sous-Liste secondaire
	--------------------------*/
	/*& .main_menu--dropdown_target
	{
		position: static;
		display: none;
		background-color: $colorMain;
		& > *
		{
			padding: 0 0 0 20px;
		}	
	}
	& .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;
		&: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;
			}		
		}	
	}*/
}

 
/* Gestion du menu open/close
------------------------------*/ 
#menu-collapse-btn
{
	margin-top: 24px;
	margin-left: 22px;
}
.menu-open
{
	// bouton de réduction du menu
	& .main_menu--collapse_btn
	{
		@extend .icon-indent-decrease ;
	}
	//margin du content initiale
	& .content_wrapper
	{
		padding:4px 15px 0 ($menuOpen + 5px);
		-moz-box-sizing: border-box;
		height: 100%;
		@include mq(false, tablet){padding: 4px 15px 0 ($menuClose + 5px);}	

	}
	// btn search
	& .search-btn
	{
		display: none;
	}
}
.menu-close
{	
	// Bouton d'agrandissement du menu
	& .main_menu--collapse_btn
	{
		@extend .icon-indent-increase;
	}
	//Menu réduit
	& .main_menu
	{
		width: $menuClose;
	}
	//margin du content réduit
	& .content_wrapper
	{
		padding: 4px 15px 0 ($menuClose + 5px);
		-moz-box-sizing: border-box;
		height: 100%;
		
	}
	//etat du formulaire de recherche
	& .search--input,
	& .search--button
	{
		display: none;
	}
	& .main_menu--label
	{
		display: none;
	}
	& .main_menu--item_child
	{
		& span + span
		{
			display: none;
		}
	}
	& .main_menu--dropdown_target
	{
		& > *
		{
			padding: 0;
		}	
	}
	& .main_menu--item_child 
	{
		padding-left:15px;
	}
}