// Functions
@function helper-gradient-angle ($direction) {

	$old-direction: $direction;
	$veryold-direction: $direction;

	// New Syntax has to be evaluated to old one
	@if $direction == 'to bottom' {
		$old-direction: 'top';
	} @else if $direction == 'to right' {
		$old-direction: 'left';
	} @else if $direction == 'to top' {
		$old-direction: 'bottom';
	} @else if $direction == 'to left' {
		$old-direction: 'right';
	} @else {
		$old-direction: angle($direction);
	}

	// And also for very old syntax
	@if $direction == 'to bottom' {
		$veryold-direction: 'left top, left bottom';
	} @else if $direction == 'to right' {
		$veryold-direction: 'top left, bottom right';
	} @else if $direction == 'to top' {
		$veryold-direction: 'left bottom, left top';
	} @else if $direction == 'to left' {
		$veryold-direction: 'top right, bottom left';
	} @else {
		$veryold-direction: angle($direction);
	}


	@return $old-direction, $veryold-direction;
}

// Mixins
// Iterates over multiple objects
@mixin iteration($count:infinite) {
	-webkit-animation-iteration-count: $count;
	animation-iteration-count: $count;
}

// Adds text shadow
@mixin text-shadow ($string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
	text-shadow: $string;
}

// Adds drop shadow
@mixin drop-shadow ($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25, $inset:"") {
	-webkit-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha) unquote($inset);
	-moz-box-shadow:    $x $y $blur $spread rgba(0, 0, 0, $alpha) unquote($inset);
	box-shadow:         $x $y $blur $spread rgba(0, 0, 0, $alpha) unquote($inset);
}

// Adds animation keyframes
@mixin keyframes($animation-name) {
	@-webkit-keyframes #{$animation-name} {
		@content;
	}
	@-moz-keyframes #{$animation-name} {
		@content;
	}
	@-ms-keyframes #{$animation-name} {
		@content;
	}
	@-o-keyframes #{$animation-name} {
		@content;
	}
	@keyframes #{$animation-name} {
		@content;
	}
}

// Adds animation (must be declared with '@include keyframes(animation)' earlier)
@mixin animation($str) {
	-webkit-animation: #{$str};
	-moz-animation: #{$str};
	-ms-animation: #{$str};
	-o-animation: #{$str};
	animation: #{$str};
}

// Absolute position on object
@mixin absolute-pos($top, $left, $bottom, $right) {
	position: absolute;
	top:$top;
	left:$left;
	bottom:$bottom;
	right:$right;
}

// Clearfix
@mixin clearfix{
	zoom:1;
	&:before, &:after{ content:""; display:table; }
	&:after{ clear: both; }
}
.clearfix{
	zoom: 1;
	&:before, &:after{ content:""; display:table; }
	&:after{ clear: both; }
}

// Adds radial gradient
@mixin radial-gradient($col1, $col2){
	background: $col1;
	background: -moz-radial-gradient(center, ellipse farthest-corner, $col1 0%, $col2 100%);
	background: -webkit-radial-gradient(center, ellipse farthest-corner, $col1 0%,$col2 100%);
	background: radial-gradient(center, ellipse farthest-corner, $col1 0%,$col2 100%);
}

// Adds linear-gradient
@mixin linear-gradient ($direction: 'to bottom', $fallback: #ccc, $from: #ccc, $to: #aaa) {

	$directions: helper-gradient-angle($direction);

	// Provide a fallback-color
	background-color: $fallback;

	// Cross-browser linear-gradients
	background-image: -webkit-gradient(linear, unquote(nth($directions, 2)), from($from), to($to)); // Android 2.1-3.0
	background-image: -webkit-linear-gradient(unquote(nth($directions, 1)), $from, $to);
	background-image:         linear-gradient(unquote($direction), $from, $to);
}

@mixin password-reveal(){
	display: flex; align-items: center; justify-content: center; width: 90%; margin: 0 auto;
	input[type=text], input[type=password], &-password { width: calc(100% - 100px); }
	input[type=text] {
		height: 40px; line-height: 40px; font-size: 1.2em; text-transform: none; outline: none; border: 1px solid black; letter-spacing: 0.5px; padding-left: 7.5px;
	}
	&-label { display: block; width: 100px; font-size: 0.75em; }
	&-trigger { margin-right: 10px; }
}

$grapple_breakpoints: (
  'phone':        400px,
  'phone-wide':   480px,
  'phablet':      560px,
  'tablet-small': 640px,
  'tablet':       768px,
  'tablet-wide':  1024px,
  'desktop':      1248px,
  'desktop-wide': 1441px,
  'beyond-desktop': 1441px
);

@mixin mq($width, $type: min) {
  @if map-has-key($grapple_breakpoints, $width) {
    $width: map-get($grapple_breakpoints, $width);
    @if $type == max {
      $width: $width - 1px;
    }
    @media only screen and (#{$type}-width: $width) {
      @content;
    }
  }
}