// =========================================================================================================================
// Spice - Messages
// ------------------------------------------------------

@charset "utf-8";
@import "variables";
@import "utils";
@import "helpers";

/// Add styles for an alert style message element. 
/// Arguments allow you to asign a class name, add colour,
/// edit rounding and border effect.
/// @name message
/// @group messages, hints & alerts
/// @param {String} className [] Class of the message
/// @param {#hex/rgba} col [] Background colour of the message
/// @param {Pixel value} rounding [3px] Rounding of the message
/// @param {Boolean} border [true] Toggle optional border 
/// @example scss - Include
///  @include message('info',#98DAE4);
///  @include message('success',#98E4A6);
///  @include message('warning',#FFC558);
///  @include message('danger',#FF9191);
/// @example css - Output
///  .message.info {
///    	background-color: #98DAE4;
///    	padding: 10px;
///    	display: block;
///    	color: #1f6c77;
///    	border-radius: 3px;
///    	border: 1px solid #70cbd9;
///  }
///  
///  .message.success {
///    	background-color: #98E4A6;
///    	padding: 10px;
///    	display: block;
///    	color: #1f772f;
///    	border-radius: 3px;
///    	border: 1px solid #70d983;
///  }
///  
///  .message.warning {
///    	background-color: #FFC558;
///    	padding: 10px;
///    	display: block;
///    	color: #724a00;
///    	border-radius: 3px;
///    	border: 1px solid #ffb325;
///  }
///  
///  .message.danger {
///    	background-color: #FF9191;
///    	padding: 10px;
///    	display: block;
///    	color: #ab0000;
///    	border-radius: 3px;
///    	border: 1px solid #ff5e5e;
///  }
///  

@mixin message($className,$col,$rounding:3px,$border:true){

	.message.#{$className}{

		background-color: #{$col};
		padding:10px;
		display: block;
		color: contrast($col,45%);

		@if $rounding {
			border-radius:#{$rounding};
		}

		@if $border{
			border: 1px solid contrast($col,10%);
		}
	}
}

/// Generate styles for a notification badge with this mixin. Arguments allow you 
/// to contol the colour and font size.
/// @name badge
/// @group messages, hints & alerts
/// @param {#hex/rgba} col [#289e83] Background colour of the badge
/// @param {Integer} fontSize [14] Font size (in pixels)
/// @example scss - Include
///  .badge.green{
///  	@include badge(#289e83,12);
///  }
/// @example css - Output
///  .badge.green {
///      background-color: #289e83;
///      padding: 0 6.3px;
///      line-height: 18px;
///      text-align: center;
///      color: white;
///      display: block;
///      border-radius: 18px;
///      font-size: 12px;
///      font-size: 0.75rem;
///  }
///

@mixin badge($col:$col-primary,$fontSize:14){

	$height : $fontSize * 1.5;
		
	background-color: $col;
	padding:0 #{$height*0.35}px;
	line-height:#{$height}px;
	text-align:center;
	color: contrast($col,80%);
	display: block;
	border-radius:#{$height}px;
	@include fontSize($fontSize);
}

/// Generate styles for a css tooltip triggered on hover. Arguments allow you 
/// to contol the direction, shift distance from trigger element, background
/// colour, font size, width, padding and arrow size. 
///  <strong>Note:</strong>
///  the font colour will be automatically generated using the 
///   <a href="#contrast">contrast</a> 
/// function using the background colour as it's base value. 
/// @name tooltip
/// @group messages, hints & alerts
/// @param {String} direction ["top"] Directon to position the tooltip. top | bottom | right | left
/// @param {pixel value} shift [0px] Amount of pixels to shift away from the trigger element
/// @param {#hex/rgba} bgCol [#222] Background colour of the tooltip
/// @param {pixel value} fontSize [14px] The font size of the tooltip
/// @param {pixel vlaue} width [120px] Width of the tooltip
/// @param {pixel shorthand} padding [10px] Padding of the tooltip
/// @param {pixel value} arrowSize [7px] Size of the arrow
/// @example scss - Include
///  @include tooltip('top',20px);
///  @include tooltip('bottom',20px);
///  @include tooltip('left');
///  @include tooltip('right');
/// @example css - Output
///  .tooltip.above {
///      cursor: pointer;
///      position: relative;
///  }
///  
///  .tooltip.above .tooltip-body {
///      opacity: 0;
///      visibility: hidden;
///      background-color: #222;
///      width: 120px;
///      padding: 10px;
///      z-index: 999;
///      line-height: 130%;
///      border-radius: 5px;
///      color: #e1e1e1;
///      font-size: 14px;
///      font-size: 0.875rem;
///      -webkit-transition-duration: 0.5s;
///      -moz-transition-duration: 0.5s;
///      transition-duration: 0.5s;
///      -webkit-transition-property: all;
///      -moz-transition-property: all;
///      transition-property: all;
///      -webkit-transition-timing-function: cubic-bezier(0.12, 0.85, 0.28, 1);
///      -moz-transition-timing-function: cubic-bezier(0.12, 0.85, 0.28, 1);
///      transition-timing-function: cubic-bezier(0.12, 0.85, 0.28, 1);
///      bottom: 27px;
///      margin-bottom: -40px;
///      position: absolute;
///      left: 50%;
///      -webkit-transform: translateX(-50%);
///      -moz-transform: translateX(-50%);
///      -ms-transform: translateX(-50%);
///      transform: translateX(-50%);
///  }
///  
///  .tooltip.above .tooltip-body:after {
///      content: "";
///      bottom: -7px;
///      position: absolute;
///      left: 50%;
///      -webkit-transform: translateX(-50%);
///      -moz-transform: translateX(-50%);
///      -ms-transform: translateX(-50%);
///      transform: translateX(-50%);
///      width: 0;
///      height: 0;
///      border-left: 7px solid transparent;
///      border-right: 7px solid transparent;
///      border-top: 7px solid #222;
///  }
///  
///  .tooltip.above:hover .tooltip-body {
///      margin: 0;
///      opacity: 1;
///      visibility: visible;
///  }
///  
///  .tooltip.below {
///      cursor: pointer;
///      position: relative;
///  }
///  
///  .tooltip.below .tooltip-body {
///      opacity: 0;
///      visibility: hidden;
///      background-color: #222;
///      width: 120px;
///      padding: 10px;
///      z-index: 999;
///      line-height: 130%;
///      border-radius: 5px;
///      color: #e1e1e1;
///      font-size: 14px;
///      font-size: 0.875rem;
///      -webkit-transition-duration: 0.5s;
///      -moz-transition-duration: 0.5s;
///      transition-duration: 0.5s;
///      -webkit-transition-property: all;
///      -moz-transition-property: all;
///      transition-property: all;
///      -webkit-transition-timing-function: cubic-bezier(0.12, 0.85, 0.28, 1);
///      -moz-transition-timing-function: cubic-bezier(0.12, 0.85, 0.28, 1);
///      transition-timing-function: cubic-bezier(0.12, 0.85, 0.28, 1);
///      top: 27px;
///      margin-top: 40px;
///      position: absolute;
///      left: 50%;
///      -webkit-transform: translateX(-50%);
///      -moz-transform: translateX(-50%);
///      -ms-transform: translateX(-50%);
///      transform: translateX(-50%);
///  }
///  
///  .tooltip.below .tooltip-body:after {
///      content: "";
///      top: -7px;
///      position: absolute;
///      left: 50%;
///      -webkit-transform: translateX(-50%);
///      -moz-transform: translateX(-50%);
///      -ms-transform: translateX(-50%);
///      transform: translateX(-50%);
///      width: 0;
///      height: 0;
///      border-left: 7px solid transparent;
///      border-right: 7px solid transparent;
///      border-bottom: 7px solid #222;
///  }
///  
///  .tooltip.below:hover .tooltip-body {
///      margin: 0;
///      opacity: 1;
///      visibility: visible;
///  }
///  
///  .tooltip.left {
///      cursor: pointer;
///      position: relative;
///  }
///  
///  .tooltip.left .tooltip-body {
///      opacity: 0;
///      visibility: hidden;
///      background-color: #222;
///      width: 120px;
///      padding: 10px;
///      z-index: 999;
///      line-height: 130%;
///      border-radius: 5px;
///      color: #e1e1e1;
///      font-size: 14px;
///      font-size: 0.875rem;
///      -webkit-transition-duration: 0.5s;
///      -moz-transition-duration: 0.5s;
///      transition-duration: 0.5s;
///      -webkit-transition-property: all;
///      -moz-transition-property: all;
///      transition-property: all;
///      -webkit-transition-timing-function: cubic-bezier(0.12, 0.85, 0.28, 1);
///      -moz-transition-timing-function: cubic-bezier(0.12, 0.85, 0.28, 1);
///      transition-timing-function: cubic-bezier(0.12, 0.85, 0.28, 1);
///      left: -127px;
///      margin-left: -40px;
///      position: absolute;
///      top: 50%;
///      -webkit-transform: translateY(-50%);
///      -moz-transform: translateY(-50%);
///      -ms-transform: translateY(-50%);
///      transform: translateY(-50%);
///  }
///  
///  .tooltip.left .tooltip-body:after {
///      content: "";
///      right: -7px;
///      position: absolute;
///      top: 50%;
///      -webkit-transform: translateY(-50%);
///      -moz-transform: translateY(-50%);
///      -ms-transform: translateY(-50%);
///      transform: translateY(-50%);
///      width: 0;
///      height: 0;
///      border-top: 7px solid transparent;
///      border-bottom: 7px solid transparent;
///      border-left: 7px solid #222;
///  }
///  
///  .tooltip.left:hover .tooltip-body {
///      margin: 0;
///      opacity: 1;
///      visibility: visible;
///  }
///  
///  .tooltip.right {
///      cursor: pointer;
///      position: relative;
///  }
///  
///  .tooltip.right .tooltip-body {
///      opacity: 0;
///      visibility: hidden;
///      background-color: #222;
///      width: 120px;
///      padding: 10px;
///      z-index: 999;
///      line-height: 130%;
///      border-radius: 5px;
///      color: #e1e1e1;
///      font-size: 14px;
///      font-size: 0.875rem;
///      -webkit-transition-duration: 0.5s;
///      -moz-transition-duration: 0.5s;
///      transition-duration: 0.5s;
///      -webkit-transition-property: all;
///      -moz-transition-property: all;
///      transition-property: all;
///      -webkit-transition-timing-function: cubic-bezier(0.12, 0.85, 0.28, 1);
///      -moz-transition-timing-function: cubic-bezier(0.12, 0.85, 0.28, 1);
///      transition-timing-function: cubic-bezier(0.12, 0.85, 0.28, 1);
///      right: -127px;
///      margin-right: -40px;
///      position: absolute;
///      top: 50%;
///      -webkit-transform: translateY(-50%);
///      -moz-transform: translateY(-50%);
///      -ms-transform: translateY(-50%);
///      transform: translateY(-50%);
///  }
///  
///  .tooltip.right .tooltip-body:after {
///      content: "";
///      left: -7px;
///      position: absolute;
///      top: 50%;
///      -webkit-transform: translateY(-50%);
///      -moz-transform: translateY(-50%);
///      -ms-transform: translateY(-50%);
///      transform: translateY(-50%);
///      width: 0;
///      height: 0;
///      border-top: 7px solid transparent;
///      border-bottom: 7px solid transparent;
///      border-right: 7px solid #222;
///  }
///  
///  .tooltip.right:hover .tooltip-body {
///      margin: 0;
///      opacity: 1;
///      visibility: visible;
///  }
/// @example markup - HTML
///  <p>
///  	Lorem ipsum dolor sit amet.  
///  
///  	<span class="tooltip top">
///  		<span>This text triggers a tooltip above. </span>
///  		<span class="tooltip-body">Tooltip body text Lorem ipsum dolor sit amet.</span>
///  	</span>
///  
///  	Lorem ipsum dolor sit amet.  
///  
///  	<span class="tooltip bottom">
///  		<span>This text triggers a tooltip below. </span>
///  		<span class="tooltip-body">Tooltip body text Lorem ipsum dolor sit amet.</span>
///  	</span>
///  
///  	Lorem ipsum dolor sit amet.  
///  
///  	<span class="tooltip right">
///  		<span>This text triggers a tooltip to the right. </span>
///  		<span class="tooltip-body">Tooltip body text Lorem ipsum dolor sit amet.</span>
///  	</span>
///  
///  	Lorem ipsum dolor sit amet. 
///  
///  	<span class="tooltip left">
///  		<span>This text triggers a tooltip to the left. </span>
///  		<span class="tooltip-body">Tooltip body text Lorem ipsum dolor sit amet.</span>
///  	</span>
///  
///  	Lorem ipsum dolor sit amet. 
///  
///  </p>

@mixin tooltip($direction:"top",$shift:0px,$bgCol:#222,$fontSize:14px,$width:120px,$padding:10px,$arrowSize:7px){

	$Type : to-lower-case($direction);

	@if $Type == "top" or $Type == "bottom" or $Type == "left" or $Type == "right" {

		.tooltip.#{$Type}{

			cursor: pointer;
			position: relative;

			.tooltip-body{

				opacity: 0;
				visibility: hidden;
				background-color: $bgCol;
				width:$width;
				padding:$padding;
				z-index: 999;
				line-height: 130%;
				border-radius: 5px;
				color:contrast($bgCol,75%);
				@include fontSize($fontSize);
				@include vendorPrefix(transition-duration,0.5s);
				@include vendorPrefix(transition-property,'all');
				@include vendorPrefix(transition-timing-function,$rush);

				@if $Type == "top" {
				
					bottom:$shift+$arrowSize;
					margin-bottom: -40px;
					@include centre(x);

					&:after{

						content:"";
						bottom:-$arrowSize;
						@include centre(x);
						@include arrow($arrowSize,"down",$bgCol,1);
					}
				}

				@if $Type == "bottom" {
					
					top:$shift+$arrowSize;
					margin-top: 40px;
					@include centre(x);

					&:after{

						content:"";
						top:-$arrowSize;
						@include centre(x);
						@include arrow($arrowSize,"up",$bgCol,1);
					}
				}

				@if $Type == "left" {
						
					left:-($width+$shift+$arrowSize);
					margin-left:-40px;
					@include centre(y);

					&:after{

						content:"";
						right:-$arrowSize;
						@include centre(y);
						@include arrow($arrowSize,"right",$bgCol,1);
					}
				}

				@if $Type == "right" {
					
					right:-($width+$shift+$arrowSize);
					margin-right:-40px;
					@include centre(y);

					&:after{

						content:"";
						left:-$arrowSize;
						@include centre(y);
						@include arrow($arrowSize,"left",$bgCol,1);
					}
				}
			}

			&:hover{

				.tooltip-body{

					margin:0;
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}

	@else {
		@error "#{$direction} is not a valid value for 'direction.' Please use 'top' | 'bottom' | 'left' | 'right'"
	}
}
