// Create Filter Checkboxes for PLP
// -----------------------------------
@mixin filter-checkbox() {
	&:before {
		@extend .fa;
		content: '';

		display: flex;
		align-items: center;
    	justify-content: center;

		width: 1rem;
		height: 1rem;
		border: 1px solid $input-border-color;
		background: $white;
		vertical-align: middle;
		margin: 0 $m-xs 0 0;
		transition: 500ms border-color ease-in-out;
	}
	&:hover:before {
		border-color: $gray-500;
		content: $fa-var-times;
		color: $gray-500;
	}
}

@mixin filter-checkbox-checked() {
	&:before {
		content: $fa-var-times;
		color: $body-color;
	}
}


// Responsive Text
// -----------------------------------
@function strip-unit($value) {
	@return $value / ($value * 0 + 1);
}

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
	$u1: unit($min-vw);
	$u2: unit($max-vw);
	$u3: unit($min-font-size);
	$u4: unit($max-font-size);

	@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
		& {
		font-size: $min-font-size;
		@media screen and (min-width: $min-vw) {
			font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
		}
		@media screen and (min-width: $max-vw) {
			font-size: $max-font-size;
		}
		}
	}
}

// Usage
// $min_width: 320px;
// $max_width: 1200px;
// $min_font: 16px;
// $max_font: 24px;

// p {
//   @include fluid-type($min_width, $max_width, $min_font, $max_font);
// }


// Font Families
// -----------------------------------
@mixin font-face($name, $filename) {
	@font-face {
		font-family: $name;
		src: url('#{$filename}.woff') format('woff');
		font-style: normal;
		font-weight: normal;
		 -webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

@mixin font-face-extended($name, $weight, $style, $filename) {
	@font-face {
		font-family: $name;
		src:url('#{$filename}.woff') format('woff');
		font-style: $style;
		font-weight: $weight;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}


@mixin clearfix() {
	*zoom: 1;
	&:before,
	&:after {
		content: "";
		display: table;
	}
	&:after {
		clear: both;
	}
}

// Used on the helper classes : menu, menu-horz-block, menu-horz-inline, menu-vert
@mixin menu-mixin() {
	display: flex;
	margin: 0;
	padding: 0;
	li {
		list-style: none;
		margin: 0;
	}
	a {
		text-decoration: none;
	}
}

@mixin menu() {
	@include clearfix();
	li {
		display: inline-block;
	}
}

@mixin mediaright() {
	@include clearfix();

	img {
		float: right;
		height: auto;
	}
}

@mixin medialeft() {
	@include clearfix();

	img {
		float: right;
		height: auto;
	}
}


@mixin loader() {
	&::before {
		height: 1em;
		width: 1em;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -0.5em;
		margin-top: -0.5em;
		content: '';
		animation: spin 1s ease-in-out infinite;
		background: url('../images/woocommerce/loader.svg') center center;
		background-size: cover;
		line-height: 1;
		text-align: center;
		font-size: 2em;
		color: rgba(#000, 0.75);
	}
}