.toggle-search-input{

	position:relative;	
	float:right;

	form{@include animate();}
	
	.search-icon {
		position:relative;
		z-index:100;
		float:right;

		label{
			padding:0.5rem 1rem 0 0;
			cursor: pointer;
			display: inline-block;
			position:relative;
			color:$black;
			font-size:1.125rem;
			&:focus{color:#000;}
			&:active{color:#000;}						
		}				
		
		
		@include breakpoint(small only) {
			display:none;
		}
	}

	.input-wrapper{

		float: right;
		position:absolute;
		z-index:10000;
		top:0;
		right:0;
				
		input{
			outline:0;
			height:auto;
			width: 0;
			padding:0.5rem 3rem 0.5rem 0;//0.5rem 3rem 0.5rem 1.25rem;
			margin:0;
			border:solid 1px $light-gray;
			box-shadow:inset 0 0 0.5rem $light-gray !important;
			border-radius:1.5rem;
			max-width:none;
			@include animate();
			opacity:0;
			color:#000;
			font-size:1.125rem;
			background:transparent;// url(../images/search-bg.png) no-repeat calc(100% - 1rem) 50%;
			//background-size:0.875rem auto;
		}
		//&.open input,
		input:focus {
			width: 20rem;
			padding:0.5rem 3rem 0.5rem 1rem;
			opacity:1;
	  	}	
	  				
		button{
			display:none;
			@include animate();
		}
	
		// mobile
		@include breakpoint(small only) {
			position:relative;
			float:none;
		
			input,
			input:focus{opacity:1;width:100%;box-sizing:border-box;margin:0.75rem 0;}

		}

	}
	
}

.toggle-figure{
	float:right;
    font-size: 1.125rem;
	padding:0.5rem 0.75rem 0.5rem 0;
	margin-right:0.75rem;
	border-right:solid 1px $light-gray;
}