/**
* Preview classes
*
* @author splitfire - http://splitfire.fr
* @version 1.0
*
* Module de preview des documents dans une fancybox
*
*
*/

//Class root
.preview
{
	width: 100%;
	height: 100%;
	@extend %clearfloat;
	@include mq($to:tablet)
	{
		margin: 10px 0 0 0;
		height: auto;
	}

	//Taille des images
	& img
	{
		max-width: 100%;
		max-height: 100%;	
	}
	//Taile de l'iframe
	& .preview_pdf
	{
		text-align: center;
		width: 100%;
		height:100%;
		@include mq($to:tablet)
		{
			height: 500px;
		}
	}
	/*
	& .preview_iframe
	{
		height: 100%;

		@include mq($to: tablet)
		{
			height: 600px;
			overflow: scroll;
			-webkit-overflow-scrolling: touch;	
		}	
	}*/
	//Colonne gauche avec les informations
	& .preview_info
	{
		float: left;
		width: 20%;
		height: 100%; 
		padding:10px;
		box-sizing : border-box;
		background-color: $headerColor;
		color: #fff;
		@include mq($to:tablet)
		{
			width: auto;
			height: auto;
			float: none;
			padding:0;
		}		
		& li
		{
			padding: 8px 0;
		}
		//icon du doucment
		& .preview_info--title_icon
		{
			//@include px2em($px :$fontSize * 4, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : font-size) ;
			//@include px2em($px :$fontSize * 4, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : width) ;
			//@include px2em($px :$fontSize * 4, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : height) ;
			@include rem((
				width		:$fontSize * 4,
				height		:$fontSize * 4,
				font-size	:$fontSize * 4
			));
		}
		//Titre du document
		& .preview_info--title
		{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin:10px 0 0 0;
			font-size: 1.2em;
			line-height: 1.5em;
			@include mq($to:tablet) 
			{
				margin:0;
			}
		}
		& .preview_info--separator:after
		{
			display: block;
			content: "";
			padding-top: 16px;
			margin-top: 16px;
			border-top: 1px solid #e6e6e6;
			@include mq($to:tablet) 
			{
				padding-top: 0;
				margin-top: 0;
			}
		}
		& a
		{
			color: #fff;
			text-decoration: none;
			
			&:hover
			{
				text-shadow: 0 0 2px #e6e6e6;
			}
		}
	}
	//Colonne droite avec le document
	& .preview_document
	{
		float: left;
		//display: table-cell;
		vertical-align: middle;
		width: 78%;
		margin-left: 2%;
		height: 100%; 
		padding:10px;
		text-align: center;
		@include box-sizing(border-box);
		@include mq($to:tablet)
		{
			width: auto;
			float: none;
			height: auto;
			margin: 5px 0 0 0;
			padding: 0;
		}
	}
	//Toolbar d'action
	& .preview_toolbar
	{
		@include mq($to:tablet)
		{
			text-align: center;
			& li
			{
				display: inline-block;
				& + li
				{
					&:before
					{
						content: "-";
						margin-left:5px;
					}					
				}
			}
		}
	}
}


//Prévisualisation impossible
.preview_denied
{
	display: table;
	width: 100%;
	height: 100%;
	& .preview_denied--container
	{
		display: table-cell;
		vertical-align: middle;
	}
	//icon des documents
	& [class*="icon-"]
	{
		//@include px2em($px :$fontSize * 15, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : font-size) ;
		//@include px2em($px :$fontSize * 15, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : width) ;
		//@include px2em($px :$fontSize * 15, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : height) ;
		@include rem((
			width		:$fontSize * 15,
			height		:$fontSize * 15,
			font-size	:$fontSize * 15
		));
		margin-bottom: 15px;
	}
	//Type du document
	& .preview_type
	{
		margin-bottom: 15px;	
	}
	//Information du document: date et taille
	& .preview_file--info
	{
		margin-bottom: 15px;		
	}
}