/**
 * Gestion de l'uploader simple (avatar)
 */
/*.simple-uploader
{
	& .simple-uploader--preview
	{
		
	}
	& .simple-uploader--btn
	{
		margin-left: 16px;
	}
}*/




/**
 * Widget de choix des fichiers à envoyer
 */
.upload_chooser
{

	// Zone de drag & drop
	& .upload_chooser--dragzone
	{
		width: 100%;
		display: table;
		margin:0 auto;
		vertical-align: middle;
		height: 280px;	
		@include mq($to:phone)
		{
			display: block;
			height: auto;
		}	
	}
	// Contenu de la zone de drag & drop (input & btn)
	& .upload_chooser--dragzone_content
	{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		border: 2px dotted grey;
		@include mq($to:phone)
		{
			display: block;
			padding:0.75em 0 0 0;
		}
		
	}
	& .upload_chooser--dragzone_info
	{
		font-size: 0.8em;
	}	
}
//Lien d'upload
.file-upload--wrapper
{
	position: relative;
	overflow: hidden;	
	z-index: 8;

	&.disabled .file-upload--input
	{
		display: none !important;
	}
	& .file-upload--input
	{
		display: block;
		z-index: 9;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		@include opacity(0);
	}
}

/**
 * Dropdown du wigdet
 */
.upload_sender--dropdown
{
	position:relative;
	@include mq($to:phone){position:static};
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	&.active
	{
		border-left: 1px solid #C1C1C1;
		border-right: 1px solid #C1C1C1;
		//Surcharge de la couleur de base de l'icon du header pour le dropdown
		& .icon-cloud-upload
		{
			color:$darkColor;
		}
					
	}
}

/* Container du weidget d'upload
---------------------------------*/
.upload_sender--dropdown_target
{
	width: 400px;
	height: 230px;
	right: -1px;
	//border-left: 1px solid #C1C1C1;
	//border-right: 1px solid #C1C1C1;
	//border-bottom: 1px solid #C1C1C1;
	@include mq($to:phone)
	{ 
		width: 100%;
		box-sizing : border-box;
		right: 0;
	}
}

//Container de la liste des elements envoyés
.upload_sender
{
	border-left: 1px solid #c1c1c1;
	border-right: 1px solid #c1c1c1;
	border-bottom: 1px solid #c1c1c1;
	
	//Hauteur du widget d'upload
	& .upload_sender--viewport
	{
		height: 200px;
	}
	
	// Liste des documents
	& .upload_sender--document
	{
		//width: 98%;
		box-sizing : border-box;
		//margin-left:auto;
		//margin-right:auto;
		//margin: 0 auto 12px auto;
		border-top: 1px solid transparent;
		border-bottom: 1px solid transparent;

		//height: 43px;
		//line-height: 43px;
		padding: 8px;
		@extend %clearfloat;
		
		&:first-child
		{
			margin-top: 8px;
		}
		&:hover
		{
			border-top: 1px solid #F4F4F4;
			border-bottom: 1px solid #F4F4F4;
		}
	}
	/* Container du fichier envoyé
	-------------------------*/
	& .upload_sender--document_title
	{
		float: left;
		width: 60%;
		margin:5px 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* lien vers le fichier envoyé
	----------------------------------*/
	& .upload_sender--document_link
	{
		display: block;
		color: #000;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		& [class*="icon-"]
		{
			display: none;
		}
			
		&.disabled:hover
		{
			text-decoration: none !important;
			cursor: default;
		}
	}
	
	/* Statut du document envoyé
	------------------------------*/
	& .upload_sender--document_status
	{
		float: left;
		width: 38%;
		margin:5px 0;
		padding-left: 2%;
		position: relative;
		text-align: right;
		white-space: nowrap;
		overflow: hidden;
		font-weight: bold;
		text-overflow: ellipsis;
		z-index: 2;
	}

	/* Container Widget vide, sans upload de fichier en cours
	-----------------------------------------------------------*/
	& .upload_sender--content_empty_container
	{
		display: table;
		width: 100%;
		height: 200px;
	}
	/* Element pour l'affichage du message d'aucun fichier en cours d'upload
	-------------------------------------------------------------------------*/
	& .upload_sender--content_empty
	{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		& > span
		{
			color:#000;
			@include opacity(.5);
			//@include px2em($px: $fontSize * 8, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : font-size);
			//@include px2em($px: $fontSize * 8, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : width);
			//@include px2em($px: $fontSize * 8, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : height);
			@include rem((
			width		: $fontSize * 8,
			height		: $fontSize * 8,
			font-size	: $fontSize * 8
			));
		}
	}
	/* Rajout d'un margin de 10px en bottom pour faire une séparation entre l'icon et le message
	--------------------------------------------------------------------------------------------*/
	& .icon-medium-black-inbox-empty
	{
		margin: 0 0 10px 0;
	}
	/* Footer de la box d'upload. On y trouve deux btn: upload et cldean
	--------------------------------------------------------------------*/
	& .upload_sender--footer
	{
		//border-top: 1px solid #c1c1c1;
		height: 60px;
		line-height: 60px;
		background-color: #F3F3F3;
	}
	& .upload_sender--footer_item
	{
		box-sizing : border-box;
		display: inline-block;
		width: 49%;
		padding:0 10px;
		vertical-align: middle;
		font-size: 0.8em;
		& #upload-sender-clean-btn
		{
			color:$titleColor;
			line-height: normal;
			//@todo à supprimer avant la prod
			display: inline-block !important;
		}
		& .btn:hover
		{
			text-decoration: none;
		}

	}
	/*& .upload_sender--footer_item + .upload_sender--footer_item
	{
		&:before
		{
		    display: block;
		    width: 1px;
		    height: 100%;
		    position: absolute;
		    border-left: 1px solid #F1F1F1;
		    content: "";
		    left: 0;
		    top: 0;
		}
	}*/
}



/**
 * Progress bar upload
 */
.upload-progress
{
	width: 98%;
	clear: both;
	height: 15px;
	z-index: 1;
	//progress bar 
	& .upload-progress-bar
	{
		display: block;
		height: 15px;
		display: block;
		//@include background-color-rgba(#3D9400, 0.2);
		background-color: $infoColor;
		transition : width 0.2s linear;
	}
	 [data-finish="true"] &	.upload-progress-bar
	{
		background-color: $successColor;		
	}
	//progress bar erreur
	.upload_sender--document_error & .upload-progress-bar
	{
		background-color: $dangerColor;
	}
}


/**
 * Overlay Upload
 */
 
 .upload_overlay
 {
	 @extend .splash_screen_bg;
	 z-index: 1003;
	 display: none;
	 //Container de l'icon et du message
	& .upload_overlay--container
	{
		position: absolute;
		width: 100%;
		left: 50%;
		top: 50%;
		left:0 \9;
		top:0 \9;
		transform  : translate(-50%, -50%);
		text-align: center;
		text-align: left \9;
	}
	//Icone
	& [class*="icon-"]
	{
		//@include px2em($px:$fontSize * 14, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : font-size);
		//@include px2em($px:$fontSize * 14, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : width);
		//@include px2em($px:$fontSize * 14, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : height);
		@include rem((
			width		: $fontSize * 14,
			height		: $fontSize * 14,
			font-size	: $fontSize * 14
		));
		color: #fff;
		margin-bottom:15px;
		@include opacity(1);		
	}
	//Message
	& .upload_overlay--sub
	{
		//@include px2em($px:$fontSize * 3, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : font-size);
		@include rem((
			font-size: $fontSize *3
		));
		text-shadow: 0 1px 2px #2C2C2C;
		color: #fff;
	}
 }
 
 
 /* tools
 --------*/

//Icon d'état du heauder à gauche du label d'upload.
//Lorsqu'il n'y a pas d'upload en cours, on affiche l'icon d'upload
.icon_upload
{
	@extend .icon-cloud-upload;
	color: #fff;
	@include opacity(1);
}
//Lorsqu'il y a  un fichier en cours d'upload, on affiche le gif
.upload-in-progress
{
	.icon_upload
	{
		vertical-align: middle;	
		//Loader sur fond #32383B
		@if($headerColor != #32383B )
		{
			@warn "Modifier la couleur du fond du loader_uploader.gif";		
		}
		background-image:image-url('js/loader/loader_uploader.gif');
		//On cache l'icone de base
		&:before
		{
			content: "";
		}
		//loader sur fond blanc
		.active & 
		{
			background-image:image-url('js/loader/loader_uploader_active.gif');		
		}
	}
}