/* stylelint-disable */

@mixin responsiveRatio($ratio: 100, $width: 100%) {
	height: 0;
	width: $width;
	padding-bottom: $ratio * $width;
}

// Round a number to specified digits.
//
// @param  {Number} $number A number to round
// @param  {Number} [$digits:0] Digits to output
// @param  {String} [$mode:round] (round|ceil|floor) How to round a number
// @return {Number} A rounded number

@function decimal-round ($number, $digits: 0, $mode: round) {
    $n: 1;
    // $number must be a number
    @if type-of($number) != number {
        @warn '#{ $number } is not a number.';
        @return $number;
    }
    // $digits must be a unitless number
    @if type-of($digits) != number {
        @warn '#{ $digits } is not a number.';
        @return $number;
    } @else if not unitless($digits) {
        @warn '#{ $digits } has a unit.';
        @return $number;
    }
    @for $i from 1 through $digits {
        $n: $n * 10;
    }
    @if $mode == round {
        @return round($number * $n) / $n;
    } @else if $mode == ceil {
        @return ceil($number * $n) / $n;
    } @else if $mode == floor {
        @return floor($number * $n) / $n;
    } @else {
        @warn '#{ $mode } is undefined keyword.';
        @return $number;
    }
}

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number

@function strip-unit($number) {
    @if type-of($number) == 'number' and not unitless($number) {
        @return $number / ($number * 0 + 1);
    }

    @return $number;
}

//Function to convert Px to Ems, for example: width: em(24px);

@function em($target, $context: $font-size-default, $unit: 'em') {

    @if $target == 0 {

        @return 0;
    }

    $result: strip-unit($target) / strip-unit($context);
    
    @return decimal-round($result, 3)+unquote($unit);
}

@mixin appearance($appearance: none) {
	-webkit-appearance: $appearance;
	-moz-appearance: $appearance;
	-ms-appearance: $appearance;
	-o-appearance: $appearance;
	appearance: $appearance;
}

@mixin clear {

	&::after,
	&::before {
		content: "";
		display: table;
	}

	&::after {
		clear: both;
	}

	& {
		*zoom: 1;
	}
}

@mixin vCenter($height, $line-height: $height) {
	height: $height;
	line-height: $height;
	vertical-align: middle;
}

@mixin fullSize() {
	width: 100%;
	height: 100%;
}

@mixin square($size: 1.5em, $important: "") {
	width: $size;
	height: $size;
}

//Mixin for Placeholder input attribute, like input type="search" HTML5 element

@mixin input-placeholder {

	&:-moz-placeholder {
		@content;
	}

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

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

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

	&::placeholder {
		@content;
	}
}

@mixin circle($size: 100%, $background-color: transparent, $border: none) {
	width: $size;
	height: $size;
	border-radius: 50%;
	border: $border;
	background-color: $background-color;
}

@mixin triangle($size, $color, $direction) {
	height: 0;
	width: 0;
	border-color: transparent;
	border-style: solid;
	border-width: $size / 2;

	@if $direction == up {
		border-bottom-color: $color;
	}

	@else if $direction == right {
		border-left-color: $color;
	}

	@else if $direction == down {
		border-top-color: $color;
	}

	@else if $direction == left {
		border-right-color: $color;
	}
}

//Adds text stroke

@mixin textStroke($width, $color) {
	$width: $width + 0;
	$shadow: 0 0 0 transparent;
	$i: 0;
	$w: 1;

	@while ($i < $width) {
		$i: $i + 1;
		$j: 0;
		$w: $w + 2;

		@for $r from 1 through $w {

			@for $c from 1 through $w {
				$x: $c - ceil($w / 2);
				$y: $r - ceil($w / 2);

				$shadow: #{$shadow}, #{$x}px #{$y}px 0 $color;
			}
		}
	}

	text-shadow: $shadow;
}

//Turn on font smoothing in Webkite
// so text wouldnt blink during CSS3 transitions

@mixin ff() {
	-webkit-font-smoothing: -subpixel-antialiased;
}

//Mixin for Font-face generation, just use:
//@include font(MyriadPro-Bold,MyriadPro-Bold,bold);

@mixin font($family, $font-weight: normal, $font-style: normal, $filename: $family) {

	@font-face {
		font-family: quote($family);
		src:
			url("../webfonts/#{$family}.woff2") format("woff2"),
			url("../webfonts/#{$family}.woff") format("woff"),
			url("../webfonts/#{$family}.ttf") format("truetype");
		font-weight: $font-weight;
		font-style: $font-style;
		font-display: swap;
	}
}

///Absolutely centers blocks or elements to center of page

@mixin absoluteCenter() {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

///Complete left to right, top to bottom
///stretching of absolutely positioned element

@mixin posZero() {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

//Custom position of absolutely positioned element,
//if only 1 variable set, all others are set the same

@mixin posCustom($top: 0, $right: $top, $bottom: $top, $left: $top) {
	top: $top;
	right: $right;
	bottom: $bottom;
	left: $left;
}

@mixin scrollbar($width:6px) {
	&::-webkit-scrollbar-track {
		background-color: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background-color: $light-gray;
		border-radius: $br-10;
		height: 5em;
	}

	&::-webkit-scrollbar {
		width: $width;
	}

	scrollbar-width: $width;
	scrollbar-color: $light-gray transparent;
}

@mixin line-above($width: 45%, $top: -1em, $color: $light-gray) {
	position: relative;

	&:before {
		content: '';
		position: absolute;
		width: $width;
		top: $top;
		border-top: 2px solid $color;
	}
}