// MIXINS

// Responsive Mixin
@mixin bp($point) {
   @media (max-width: $point) { @content ; }
}

@mixin shorter-than($point) {
   @media (max-height: $point) { @content ; }
}

// Center Element
@mixin center($options: '') {
	@if($options == '') {
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);

	}
	@if(to_lower_case($options) == 'x') {
		left: 50%;
		-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
				transform: translateX(-50%);
	}
	@if(to_lower_case($options) == 'y') {
		top: 50%;
		-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
				transform: translateY(-50%);
	}
	@if(to_lower_case($options) == 'reset') {
		top: inital;
		left: inital;
		-webkit-transform: none;
			-ms-transform: none;
				transform: none;
	}
}

// Border Radius
@mixin border-radius($options: 50%) {
	-webkit-border-radius: $options;
	   -moz-border-radius: $options;
			border-radius: $options;
}

// Transition
@mixin transition($options: all 250ms) {
	-webkit-transition: $options;
	   -moz-transition: $options;
		-ms-transition: $options;
		 -o-transition: $options;
			transition: $options;
}

// Transitions (Multiple)
@mixin transitions($options...) {
	-webkit-transition: $options;
	   -moz-transition: $options;
		-ms-transition: $options;
		 -o-transition: $options;
			transition: $options;
}

// Box Shadow
@mixin box-shadow($options: 0 10px 20px -10px #000000) {
	-webkit-box-shadow: $options;
	   -moz-box-shadow: $options;
			box-shadow: $options;
}

// Box Shadows (Multiple)
@mixin box-shadows($options...) {
	-webkit-box-shadow: $options;
	   -moz-box-shadow: $options;
			box-shadow: $options;
}

// Transform
@mixin transform($options) {
	-webkit-transform: $options;
	   -moz-transform: $options;
		-ms-transform: $options;
		 -o-transform: $options;
			transform: $options;
}

// User Select (Disallow Select)
@mixin user-select($option:none) {
	-webkit-touch-callout: $option;
	  -webkit-user-select: $option;
	   -khtml-user-select: $option;
		 -moz-user-select: $option;
		  -ms-user-select: $option;
			  user-select: $option;
}

// Appearance
@mixin appearance($options) {
	-webkit-appearance: $options;
	   -moz-appearance: $options;
		-ms-appearance: $options;
			appearance: $options;
}

// Viewport Height
@mixin viewport-height() {
	height: 100vh;
	
	body.admin-bar & {
		height: calc(100vh - 32px);
	
		@include bp(782px) {
			height: calc(100vh - 46px);
		}
	
		@include bp(600px) {
			height: 100vh;
		}
	}
}

// Admin Bar
@mixin admin-bar($distance: 0px) { 
    top: $distance;
 
    body.admin-bar & {
        @if(unit($distance) == 'px') {
            top: (32px + $distance);
        } @else {
            top: calc(32px + #{$distance});
        }
 
        @include bp(782px) {
            @if(unit($distance) == 'px') {
                top: (46px + $distance);
            } @else {
                top: calc(46px + #{$distance});
            }
        }
 
        @include bp(600px) {
            top: $distance;
        }
    }
}


// Inputs placeholder styles
@mixin placeholder() {
	&::-webkit-input-placeholder {
		@content ;
	}

	&::-moz-placeholder {
		@content ;
	}

	&:-ms-input-placeholder {
		@content ;
	}

	&:-moz-placeholder {
		@content ;
	}
}


// Shading Function
@function check_brightness($color) {
  $sum: red($color) + green($color) + blue($color);
  @return $sum / (255*3);
}

@function shading($color, $percent) {
	@if (check_brightness($color) > 0.3) { // Brighter
		@return darken($color, $percent);
	} @else { // Darker
		@return lighten($color, $percent);
	}
}

@function contrasted($color) {
	@if (lightness($color) > 50) {
		@return #000; // Lighter backgorund, return dark color
	} @else {
		@return #fff; // Darker background, return light color
	}
}

// Background Color / Gradient
@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}`.";
}

@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;
}

@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        : left,
		to bottom right : top left,
		to bottom       : top,
		to bottom left  : top right,
		to left         : right,
		to left top     : right bottom
	);
	@if map-has-key($conversion-map, $value) {
		@return map-get($conversion-map, $value);
	}
	@return 90deg - convert-angle($value, 'deg');
}

@mixin grad($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);
}
// Convert SVG to CSS
@function svg-uri($svg) {
    $encoded: '';
    $slice: 2000;
    $index: 0;
    $loops: ceil(str-length($svg) / $slice);
    @for $i from 1 through $loops {
        $chunk: str-slice($svg, $index, $index + $slice - 1);
        $chunk: str-replace($chunk, '"', "'");
        $chunk: str-replace($chunk, '<', '%3C');
        $chunk: str-replace($chunk, '>', '%3E');
        $chunk: str-replace($chunk, '&', '%26');
        $chunk: str-replace($chunk, '#', '%23');
        $encoded: #{$encoded}#{$chunk};
        $index: $index + $slice;
    }
    @return url("data:image/svg+xml;charset=utf8,#{$encoded}");
}

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