/**
* Features classes
*
* @author splitfire - http://splitfire.fr
* @version 1.0
*
*/


/* 
 *
 * Présentation de l'offre actuel de l'utisateur
 *
 */
 

//liste des options 
.features_subscription
{
	font-size:1.2em;
	color:black;
	font-weight: bold;
	@include mq($to: tablet){font-size:.9em;}
	& > li
	{	
		margin:0 0 1.2em 0;		
	}
}

//Montant de l'abonnement
.features_price--number
{
	font-size:3em;
	color:$toolbarActionColor;
	font-weight: bold;
	@include mq($to: tablet)
	{
		display: block; 
		text-align: center;
	}
}
.feature-period
{
	@include mq($to: tablet)
	{	
		display: block;
		text-align: center;
		font-size: .8em;
	}
}

//Date de son abonnement
.features_price--date
{
	margin:10px 0 0 0;
	font-size:.8em;
}

/* 
 *
 * Gestion des options type: stockage, collaborateurs.
 *
 */
.feature-slider
{
	position: relative;
	margin: 0 80px;
	@include mq($to: tablet){margin:0}
	
	& .ui-slider-range
	{
		background-image: none;
		background-color: $toolbarActionColor;
		transition : width 0.2s linear;
	}
	& .ui-slider-handle
	{
		background: none;
		border: none;
		outline: none;		
		background-color: #fafafa;
		border: 1px solid #666;
		border-radius: 12px;
		transition : left 0.2s linear;
	}
}

//container des options et label
.features_option_label
{
	@include mq($to: tablet)
	{
		@include after();
		margin:0 0 0 10px;
	}
}
.feature_option
{
	margin: 80px 0 50px 0;
	@include mq($to: tablet){margin:0}

	&:first-child
	{
		margin-top: 50px;
		@include mq($to: tablet){margin:0}
	}
}
.feature_option_large
{
	margin: 50px 0;
	@include mq($to: tablet){ margin: 15px 0;}
}

// label liste des options
.features_label
{
	@include mq($to: tablet)
	{
		float:left;	
		margin:0;
	}

}
.feature-select
{
	@include mq($to: tablet)
	{
		float: left;
	}
}

// Légende des libéllé d'options
.ui-slider-legend 
{
	margin-top: -32px;
	
	& .ui-slider-legend--item
	{
		position: absolute;
		text-align: center;
		color: $toolbarActionColor;
		font-size: 1.3em;
		font-weight: bold;
		cursor: pointer;
		white-space: nowrap;
		
		&.active
		{
			color: black;
		}
	}
}
// Légende des prix d'options
.ui-slider-price 
{
	margin-top: 50px;
	
	& .ui-slider-price--item
	{
		position: absolute;
		text-align: center;
		color: #666;
		cursor: pointer;
		white-space: nowrap;
		
		&.active
		{
			font-weight: bold;
		}
	}
}