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


/* Var
-----------------------------*/
$prefix 	 : tooltip;
$contentAttr : data-tooltip;
$trigger	 : data-trigger;
$placement	 : data-placement;

.#{$prefix}
{
	position: relative;
	outline: none;
	/* Tooltip
	--------------------*/
	&:after,
	&:before
	{
		position: absolute;
		display: none\9; //:after:hover doesn't work with ie8
		opacity: 0;
		@include transition (opacity .20s linear 0s);
		visibility:hidden;
		outline: none;
		text-decoration: none;
		line-height: normal;
	}
	&:after
	{
		@include box-sizing(border-box);
		padding:6px;
		background-color: black;
		background-color: rgba(black, .8);
		color:white;
		white-space: nowrap;
		content: attr(#{$contentAttr});		
	}
	
	/* Tooltip trigger
	--------------------*/	
	&[#{$trigger}="hover"]:hover:before,
	&[#{$trigger}="hover"]:hover:after,
	&[#{$trigger}="focus"]:focus:before,
	&[#{$trigger}="focus"]:focus:after
	{
		display: block\9; //:after:hover doesn't work with ie8
		opacity: 1;
		@include transition (opacity .20s linear 0s);
		visibility: visible;
		z-index: 2;
	}
	
	/* Tooltip placement top
	----------------------------*/
	&[#{$placement}="top"]:after,
	&[#{$placement}="top"]:before
	{
		bottom:100%;
	}
	&[#{$placement}="top"]:after
	{
		left:50%;
		margin:0 0 15px 0;
		@include border-radius(4px);
		@include transform (translate(-50%));
	}
	&[#{$placement}="top"]:before
	{
		left: 50%;
		@include transform (translate(-50%));
		border-right: 8px solid transparent;
		border-left: 8px solid transparent;
		border-top: 8px solid black;
		border-top: 8px solid rgba(black, .8);
		content: "";
		margin:0 0 8px 0;
	}
	
	/* Tooltip placement right
	----------------------------*/
	&[#{$placement}="right"]:after,
	&[#{$placement}="right"]:before
	{
		left:100%;
	}
	&[#{$placement}="right"]:after
	{
		top:50%;
		margin:0 0 0 15px;
		@include border-radius(4px);
		@include transform (translate(0,-50%));
	
	}
	&[#{$placement}="right"]:before
	{
		top:50%;
		@include transform (translate(0,-50%));
		margin: 0 0 0 7px;
		border-bottom: 8px solid transparent;
		border-top: 8px solid transparent;
		border-right: 8px solid black;
		border-right: 8px solid rgba(black, .8);
		content: "";
	}		
	/* Tooltip placement Bottom
	------------------------------*/
	&[#{$placement}="bottom"]:after,
	&[#{$placement}="bottom"]:before
	{
		top:100%;
	}
	&[#{$placement}="bottom"]:after
	{
		left:50%;
		margin:15px 0 0 0;
		@include border-radius(4px);
		@include transform (translate(-50%));
	
	}
	&[#{$placement}="bottom"]:before
	{
		left:50%;
		@include transform (translate(-50%));
		margin:7px 0 0 0;
		border-right: 8px solid transparent;
		border-left: 8px solid transparent;
		border-bottom: 8px solid black;
		border-bottom: 8px solid rgba(black, .8);
		content: "";
	}
	
	/* Tooltip placement left
	----------------------------*/
	&[#{$placement}="left"]:after,
	&[#{$placement}="left"]:before
	{
		right:100%;
	}
	
	&[#{$placement}="left"]:after
	{
		top:50%;
		@include transform (translate(0,-50%));
		margin:0 15px 0 0;
		@include border-radius(4px);

	
	}
	&[#{$placement}="left"]:before
	{
		top:50%;
		@include transform (translate(0,-50%));
		margin: 0 7px 0 0;
		border-bottom: 8px solid transparent;
		border-top: 8px solid transparent;
		border-left: 8px solid black;
		border-left: 8px solid rgba(black, .8);
		content: "";
	}
	
	/*Tooltip default placement and trigger
	-----------------------------------------*/
		
	&:not([#{$placement}]) //Tooltip default placement
	{
		//@extend .#{$prefix}[data-placement="top"];
	}	
	&:not([#{$trigger}]) // Tooltip default trigger
	{
		//@extend .#{$prefix}[data-trigger="hover"];
	}	
}