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

/* Mixin by Compass
-------------------- */

@import "compass/css3/transition";
@import "compass/css3/box-shadow";
@import "compass/css3/border-radius";
@import "compass/css3/transform";
@import "compass/css3/images";
@import "compass/css3/user-interface";
@import "compass/typography/text/replacement";
@import "compass/css3/opacity";
@import "compass/css3/box-sizing";
@import "compass/utilities/sprites/sprite-img";
@import "compass/utilities/sprites/base";
@import "compass/css3/box";
@import "compass/support";


/* Mixin by Splitfire
----------------------- */
 
@mixin backface($state)
{
	-webkit-backface-visibility: $state;
	   -moz-backface-visibility: $state;
	   	-ms-backface-visibility: $state;
	  		backface-visibility: $state;
}

@mixin transform-style($value)
{
	-webkit-transform-style: $value;
	   -moz-transform-style: $value;
	    -ms-transform-style: $value;
		    transform-style: $value;
}

/**
 * Gestion des background-color en rgba
 */
@mixin background-color-rgba($color, $opacity)
{

	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity * 100});
	filter:alpha(opacity=#{$opacity * 100});
	zoom:1;
	background-color: $color;	
	background-color: rgba($color, $opacity);
}

/**
 * Gestion des césures sur des parapgraphes
 */
@mixin text()
{
		word-wrap: break-word;
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	    -ms-hyphens: auto;
	     -o-hyphens: auto;
	        hyphens: auto;
}

/**
 * hack pour le inline-block
 */
@mixin inline-block()
{
    display:inline-block;
    *display:inline;
    *zoom:1;
}


/**
 * Compatilité d'ie8 avec l'opacity
 */
@mixin opacity($opacity)
{
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity * 100});
	opacity: $opacity ;
	zoom: 1;
}

/**
 * Empeche la selection 
 */
@mixin unselectable()
{
	-webkit-user-select: none;
   	   -moz-user-select: none;
   	    -ms-user-select: none;
   	    	user-select: none;
}
 
/**
 * Alias vers le mixin after-before()
 */
@mixin after()
{
	@include after-before($pseudo-element : 'after', $type: 'table');
}
/**
 * Alias vers le mixin after-before()
 */
@mixin before()
{
	@include after-before($pseudo-element : 'before', $type: 'table');
}


/**
 * Mixin pour gérer la pseudo classe :after et :before
 * @param string type du pseudo éléments
 * @param string type du display
 * @return html
 */
@mixin after-before($pseudo-element : 'after', $type: 'block')
{
	@if ($pseudo-element == 'after')
	{
		&:after
		{
			display: unquote($type);
			content: "";
			clear: both;
			@content;
		}
	}
	@else if ($pseudo-element == 'before')
	{
		&:before
		{
			display: unquote($type);
			content: "";
			clear: both;
			@content;
		}
	}
}

/**
 * Apply media query
 * @param string|number|false device or value in pixel or false if empty
 * @param string|number|false device or value in pixel or false if empty
 * @param string|false options add at end for mq
 */
@mixin mq($fromDevice:false, $toDevice:false, $options:false) 
{
	$minWidth : false;
	$maxWidth : false;
	
	@if((false != $fromDevice) and (false == $toDevice) and (false == $options))
	{
		@include mq-device($fromDevice, $options){ @content; }
	}
	@else 
	{
		@if(isNotEmpty($fromDevice)) 
		{
			@if(string == type-of($fromDevice))
			{			
				$minWidth : mq-minWidth($fromDevice);	
			}
			@else if(number == type-of($fromDevice))
			{
				@if(unitless($fromDevice))
				{
					@warn "No unit #{$fromDevice}"; 
				}
				@else
				{
					$minWidth : $fromDevice + 1;
				}				
			}		
			@if(false == $minWidth) 
			{
				@warn "invalid min-width value : #{$fromDevice}";
			}
		}		
		
		@if(isNotEmpty($toDevice)) 
		{
			@if(string == type-of($toDevice))
			{
				$maxWidth : mq-maxWidth($toDevice);	
			}
			@else if(number == type-of($toDevice))
			{
				@if(unitless($toDevice))
				{
					@warn "No unit #{$toDevice}"; 
				}
				@else
				{
					$maxWidth : $toDevice;
				}				
			}
			@if(false == $maxWidth) 
			{
				@warn "Invalid max-width value : #{$toDevice}";
			}	
		}		
	
		@include mq-pixel($minWidth, $maxWidth, $options){ @content; };
	}
}

/**
 * Apply media query
 * @param string|number|false device or value in pixel
 * @param string|false options add to media query
 */
@mixin mq-device($device, $options:false)
{
	@include mq-pixel(mq-minWidth($device),mq-maxWidth($device), $options){ @content; };
}

/**
 * Apply media query for device
 * @param string device
 */
@mixin mq-pixel($minWidth:false, $maxWidth:false, $options:false) 
{	
	$mediaQuery	: "";
	// Forge min-width
	@if(isNotEmpty($minWidth))	
	{
		$mediaQuery	: '#{$mediaQuery} and (min-width : #{$minWidth})';
	}
	// Forge max-width
	@if(isNotEmpty($maxWidth)) 
	{
		$mediaQuery	: '#{$mediaQuery} and (max-width : #{$maxWidth})';
	}
	// Forge options
	@if(isNotEmpty($options) and string == type-of($options))
	{
		$mediaQuery	: '#{$mediaQuery} #{$options}';
	}
	// Warning if media query is empty
	@if($mediaQuery == "") 
	{
		@warn "Media query is empty : @media all {}";
	}
	// Forge final media query	
	$mediaQuery : unquote(#{$mediaQuery});
	@media all #{$mediaQuery}
	{
		@content;
	}
}
								
/**
 * Create css class for timeline icon
 * @param string class
 * @param string icon
 */								
@mixin add-icon($class, $icon)
{
	$icon : unquote(#{$icon});
									
	&.#{$class}:before
	{
		content: "#{$icon}";
	}
}	
								

/**
 * Convert px to em, rem
 * @param int to convert
 * @param int base in px
 */	
@mixin px2em($px, $base-font-size:$base-font-size, $em : false, $rem: false, $percent: false, $property : font-size) 
{
    @if (unitless($px)) 
	{
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    } 
	@if (unit($px) == em) 
	{
		#{$property}:$px;
    }
    $value : ($px / $base-font-size);
	@if $percent
	{
		#{$property}: $value * 100%;
	}
	@if $em
	{
		#{$property}:$value * 1em;
	}
	@if $rem
	{
		#{$property}:$value * 1rem;
	}
}