/* ==========================================================================
/* ===== MIXIN Founctions  ===== */
/*========================================================================== */

// Author: Valeriu Tihai

//FUNCTION

//Convert PT to EM
@function pt2em($size){
	@return #{$size * 0.0836458341698}em
	//@return #{$pixel / $base-size}em;
}


//$dir = Direction of gradient
//$from = Starting color
//$to = Ending color
//$width = Border width/thickness

@mixin border-gradient($dir, $from, $to, $width) {
  border-left: $width solid $from;
  border-right: $width solid $to;
  background-image:
    // Needed for both the top and bottom borders
    -webkit-linear-gradient($dir, $from, $to),
    -webkit-linear-gradient($dir, $from, $to);
  background-size: 100% $width;
  background-position: 0 100%, 0 0;
  background-repeat: no-repeat;
  background-clip: border-box;
}

@mixin text-gradient($dir, $from, $to) {
  background: -webkit-linear-gradient($dir, $from, $to);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



@mixin hardware-acceleration {
	@include transform(translateZ(0));
	@include backface-visibility(hidden);
	@include perspective(1000);
}




// Mixin Pulse
@mixin pulse($duration) {
  animation-name: pulse;
  -webkit-animation-name: pulse;

  animation-duration: $duration;
  -webkit-animation-duration: $duration;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

  cursor: pointer;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0,7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.2);
    opacity: 0,7;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}



// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

/// Convert angle
/// @author Chris Eppstein
/// @param {Number} $value - Value to convert
/// @param {String} $unit - Unit to convert to
/// @return {Number} Converted angle
@function convert-angle($value, $unit) {
  $convertable-units: deg grad turn rad;
  $conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);
  @if index($convertable-units, unit($value)) and index($convertable-units, $unit) {
    @return $value
             / nth($conversion-factors, index($convertable-units, unit($value)))
             * nth($conversion-factors, index($convertable-units, $unit));
  }

  @warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";
}

/// Test if `$value` is an angle
/// @param {*} $value - Value to test
/// @return {Bool}
@function is-direction($value) {
  $is-direction: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));

  @return $is-direction or $is-angle;
}

/// Convert a direction to legacy syntax
/// @param {Keyword | Angle} $value - Value to convert
/// @require {function} is-direction
/// @require {function} convert-angle
@function legacy-direction($value) {
  @if is-direction($value) == false {
    @warn "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be an angle or a direction";
  }

  $conversion-map: (
    to top          : bottom,
    to top right    : bottom left,
    to right top    : left bottom,
    to right        : left,
    to bottom right : top left,
    to right bottom : left top,
    to bottom       : top,
    to bottom left  : top right,
    to left bottom  : right top,
    to left         : right,
    to left top     : right bottom,
    to top left     : bottom right
  );

  @if map-has-key($conversion-map, $value) {
    @return map-get($conversion-map, $value);
  }

  @return 90deg - convert-angle($value, 'deg');
}

/// Mixin printing a linear-gradient
/// as well as a plain color fallback
/// and the `-webkit-` prefixed declaration
/// @access public
/// @param {String | List | Angle} $direction - Linear gradient direction
/// @param {Arglist} $color-stops - List of color-stops composing the gradient
@mixin linear-gradient($direction, $color-stops...) {
  @if is-direction($direction) == false {
    $color-stops: ($direction, $color-stops);
    $direction: 180deg;
  }

  //background: nth(nth($color-stops, 1), 1);
  //background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
  background: linear-gradient($direction, $color-stops);
}

// Tests
//.test-1 {
//  @include linear-gradient(142deg,#31B7D7, #EDAC7D);
//}
//
//.test-2 {
//  @include linear-gradient(to right, #E47D7D 0%, #C195D3 50%, #4FB4E8 100%);
//}
//
//.test-3 {
//  @include linear-gradient(42deg, #B58234 0%, #D2B545 50%, #D7C04D 50.01%, #FFFFFF 100%);
//}

@mixin box-shadow($top, $left, $blur, $spread, $color, $inset: false) {
	@if $inset {
		-webkit-box-shadow:inset $top $left $blur $spread $color;
		-moz-box-shadow:inset $top $left $blur $spread $color;
		box-shadow:inset $top $left $blur $spread $color;
	} @else {
		-webkit-box-shadow: $top $left $blur $spread $color;
		-moz-box-shadow: $top $left $blur $spread $color;
		box-shadow: $top $left $blur $spread $color;
	}
}


@mixin grayscale($pct) {
  filter: grayscale($pct);
 }

 @mixin blur($blur) {
  filter: blur($blur);
  }

@mixin ribbon($color, $textcolor : #ffffff, $bleed : 1px){
	font-weight: bold;
	font-family: Sans-Serif;
	color: #333;
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
	transform: rotate(45deg);
	position: relative;
	padding: 6px 0;
	left: 4px;
	top: 20px;
	width: 155px;
	box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.1);
	background: -webkit-gradient(linear, left top, left bottom, from(lighten($color,10%)), to($color));
	color: $textcolor;

	&:before, &:after {
		content: "";
		/* Colour of the triangle. To flip the effect, use border-bottom. */
		border-top: $bleed solid $color;
		border-left: $bleed solid transparent;
		border-right: $bleed solid transparent;
		position:absolute;
		bottom: -$bleed; /* +1 to compensate for the border */
	}
	&:before { left: 0; }
	&:after { right: 0; }
}

// for debug only, ex: @include debug(green); */
@mixin debug($color) {
	outline:1px solid $color;
}

// links color
@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false, $normalbg: false, $hoverbg: false) {
  color: $normal;
    @if $normalbg {
      background-color: $normalbg;
  }
    @if $hoverbg {
    &:hover {
      background-color: $hoverbg;
    }
  }
  @if $visited {
    &:visited {
      color: $visited;
    }
  } @else {
    &:visited {
      color: lighten($normal, 10%);
    }
  }
  @if $focus {
    &:focus {
      color: $focus;
    }
  }
  @if $hover {
    &:hover {
      color: $hover;
    }
  } @else {
    &:hover {
      color: darken($normal, 10%);
    }
  }
  @if $active {
    &:active {
      color: $active;
    }
  }
}

//	Transperent Background
@mixin transparent-bg($color, $alpha) {
    $rgba: rgba($color, $alpha);
    $ie-hex-str: ie-hex-str($rgba);
    background-color: transparent;
    background-color: $rgba;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
    zoom: 1;
}






//-------------------------------------------------------------------------------------
// Angled Edges v2.0.0 (https://github.com/josephfusco/angled-edges)
// Copyright 2017 Joseph Fusco
// Licensed under MIT (https://github.com/josephfusco/angled-edges/blob/master/LICENSE)
//-------------------------------------------------------------------------------------

/// Replace `$search` with `$replace` in `$string`.
///
/// @author Hugo Giraudel
/// @link   http://www.sassmeister.com/gist/1b4f2da5527830088e4d
///
/// @param  {String}  $string - Initial string
/// @param  {String}  $search - Substring to replace
/// @param  {String}  $replace ('') - New value
/// @return {String}  Updated string
///
@function ae-str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + ae-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

/// Encode SVG to use as background.
///
/// @param  {String}  $string
/// @return {String}  Encoded svg data
///
@function ae-svg-encode($string){
  $result: ae-str-replace($string, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
  $result: ae-str-replace($result, '%', '%25');
  $result: ae-str-replace($result, '"', '\'');
  $result: ae-str-replace($result, '<', '%3C');
  $result: ae-str-replace($result, '>', '%3E');

  @return 'data:image/svg+xml,' + $result;
}

/// Outputs pseudo content for main mixin.
///
/// @author Joseph Fusco
///
/// @param  {String}  $location
/// @param  {Number}  $height
/// @output psuedo content
///
@mixin ae-pseudo($wedge, $height, $width) {
  background-image: url($wedge);
  background-position: center center;
  background-repeat: no-repeat;

  // full width wedge - needed as Firefox ignores preserveAspectRatio="none" in this case
  @if ($width == null) {
    background-size: 100% 100%;
  }

  content: '';
  height: $height * 1px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
}

/// Attatches an svg wedge shape to an element.
///
/// @author Joseph Fusco
///
/// @param  {String}  $location   - 'inside top', 'outside top', 'inside bottom', 'outside bottom'
/// @param  {String}  $hypotenuse - 'upper left', 'upper right', 'lower left', 'lower right'
/// @param  {Color}   $fill
/// @param  {Number}  $height
/// @param  {Number}  $width
/// @output '::before' and/or '::after' with svg background image
///
@mixin angled-edge($location, $hypotenuse, $fill, $height: 100, $width: null) {

  position: relative;

  $points: (
    'upper left': '0,#{$height} #{$width},#{$height} #{$width},0',
    'upper right': '0,#{$height} #{$width},#{$height} 0,0',
    'lower left': '0,0 #{$width},#{$height} #{$width},0',
    'lower right': '0,0 #{$width},0 0,#{$height}'
  );

  // full width wedge
  @if ($width == null) {
    $points: (
      'upper left': '0,#{$height} 100,#{$height} 100,0',
      'upper right': '0,#{$height} 100,#{$height} 0,0',
      'lower left': '0,0 100,#{$height} 100,0',
      'lower right': '0,0 100,0 0,#{$height}'
    );
  }

  // ensure $fill color is using rgb()
  $fill-rgb: 'rgb(' + round(red($fill)) + ',' + round(green($fill)) + ',' + round(blue($fill)) + ')';

  // capture alpha component of $fill to use with fill-opacity
  $fill-alpha: alpha($fill);

  $wedge: '<svg width="#{$width}" height="#{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';

  // full width wedge
  @if ($width == null) {
    $wedge: '<svg preserveAspectRatio="none" viewBox="0 0 100 #{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';
  }

  $encoded-wedge: ae-svg-encode($wedge);

  @if ($location == 'inside top') {
    &::before {
      @include ae-pseudo($encoded-wedge, $height, $width);
      top: 0;
    }
  } @else if ($location == 'outside top') {
    &::before {
      @include ae-pseudo($encoded-wedge, $height, $width);
      top: -$height * 1px;
    }
  } @else if ($location == 'inside bottom') {
    &::after {
      @include ae-pseudo($encoded-wedge, $height, $width);
      bottom: 0;
    }
  } @else if ($location == 'outside bottom') {
    &::after {
      @include ae-pseudo($encoded-wedge, $height, $width);
      bottom: -$height * 1px;
    }
  } @else {
    @error 'Invalid argument for $location - must use: `inside top`, `outside top`, `inside bottom`, `outside bottom`';
  }

  @if (map-has-key($points, $hypotenuse) == false) {
    @error 'Invalid argument for $hypotenuse - must use: `upper left`, `upper right`, `lower left`, `lower right`';
  }
}
