/**
* Search classes
*
* @author splitfire - http://splitfire.fr
* @version 1.0
*
*
* Barre de recherche que l'on retrouve sur le menu de gauche.
* Il se présente de deux facons.
* - Lorsque le menu est replié: une icon 
* - Lorsque le menu est déplié: un formulaire de recherche.
*
*/ 

.search
{
	height: 48px;
	margin:0 0 22px;
	padding:$toolbarActionHeight 0 0 0;
	text-align: center;	
	@include mq($to: phone){ padding:6px 0 0 0}
	@extend %clearfloat;
	& .search--input
	{
		position: relative; // support $.sfx.inputCleaner
		float: left;
	    height: 40px;
		background-color: #fff;
	    line-height: 40px;
	    padding: 4px 0 4px 4px;
	    //Etat quand le menu est fermé
	    .menu-close &
	    {
		    display: none;
	    }

	}
	& .search_input--input
	{
		width: 200px;
		padding:8px 0 8px 2px;
		background-color: white;
		border: solid 1px white;
		color: #000;	
		&:focus
		{
			//border: solid 1px #00b2e0;
			box-shadow: 0px 0px 1px #ccc inset;
		}
	}
	& .search-btn
	{
		width:32px;
		height:32px;
		cursor: pointer;
		margin:10px 0 0 0;
		font-size:32px;
		color:#fff;
		opacity:1;
		outline: none;
		
		//Etat du bouton quand le menu est ouvert
		.menu-open &
		{
			display: none;
		}
	}

	& .search--button
	{
		float: left;
		width: 23px;
		height: 40px;
		line-height: 40px;
		padding: 4px 4px 4px 0;
		background-color: #fff;
		cursor: pointer;
		//Etat dans le men est fermé
		.menu-close &
		{
			display: none;
		}
	}
	
	// Support de l'etiquette de recherche globale
	& .search_input--global_search
	{
		display: none;
		position: absolute;
		//-10px que la taille du menu open pour prendre en compte tinyscroll, -10px pour éviter d'avoir un 100% du menu
		width: $menuOpen - 10px - 10px;
		margin:14px 0 0 5px; 
		z-index: 25;
		left: 0;
	}
	//Container pour l'étiquette
	& .search_input--global_search_container
	{
		position: relative;
		background-color: #fff;
		//Caret		
		&:before 
		{
			position: absolute;
			left: 50%;
			bottom: 100%;
			transform  : translate(-50%);
			border-right: 10px solid transparent;
			border-left: 10px solid transparent;
			border-bottom: 10px solid #fff;
			content: "";
		}
	}
	//lien du global search
	& .search_input--global_search_link
	{
		color: #5A5A5A;
		text-decoration: none;
		&:hover
		{
			text-decoration: underline;
		}
	}
}