
// Mixins
@import 'woocommerce/mixins';

 
@mixin transition($values...) { 
    transition: $values;
}

@mixin transform($args...) {
	transform: $args;
}

@mixin box-sizing($args...) {
	box-sizing: $args;
}

@mixin keyframes($animation-name) {
	@keyframes #{$animation-name} {
		@content;
	}
}

@mixin animation($str) {
	animation: #{$str};      
}

@mixin at-least($device-width) {
	@media screen and (min-width: $device-width) {
		@content 
	}
}

@mixin until($device-width) {
	@media screen and (max-width: $device-width - 1) {
		@content 
	}
}

@mixin opacity-animate-hidden($duration) {
	visibility: hidden;
	opacity: 0;
	display: block;
	@include transition(opacity $duration linear, visibility 0s linear $duration);
}

@mixin pos-abs-center-x-center-y($w, $h: "auto") {

	@if $h == 'auto' {
		$h: $w;
	}

	display: block;
	position: absolute;
	top: 50%; 
	left: 50%;
	width: $w;
	height: $h; 
	margin-left: -$w/2;
	margin-top: -$h/2;
}

@mixin color-link() {
	color: $color-primary; /* redux[color: main_theme_color] */
	&:visited {
		color: $color-primary; /* redux[color: main_theme_color] */
	}
	&:hover {
		color: $color-darker-gray;
	}
}

@mixin color-link-inv() {
	color: $color-darker-gray;
	
	&:visited {
		color: $color-darker-gray;
	}
	&:hover {
		color: $color-primary; /* redux[color: main_theme_color] */
	}

	.dark & {
		color: $color-lighter-gray;
		
		&:visited {
			color: $color-lighter-gray;
		}
		&:hover {
			color: $color-primary; /* redux[color: main_theme_color] */
		}		
	}
}

@mixin color-link-dark() {
	color: $color-light-gray;
	
	&:visited {
		color: $color-light-gray;
	}
	&:hover {
		color: $color-primary; /* redux[color: main_theme_color] */
	}
}

@mixin color-link-dark-white() {
	color: #fff;
	
	&:visited {
		color: #fff;
	}
	&:hover {
		color: $color-primary; /* redux[color: main_theme_color] */
	}
}


@mixin button($style: default, $size: none) {
	@extend %form-control-buttons;
	@extend %button;
	@extend %link-transition;

	@if $size == 'mini' {
		@include button-mini();
	} @elseif $size == 'small' {
		@include button-small();
	} @elseif $size == 'normal' {
		@include button-normal();
	} @elseif $size == 'large' {
		@include button-large();
	} @elseif $size == 'xlarge' {
		@include button-xlarge();
	}

	@if $style == 'default' {
		background-color: $color-primary; /* redux[background-color: main_theme_color] */

		.dark & {
			background-color: $color-primary; /* redux[background-color: main_theme_color] */
		}
	} @else {
		background-color: $color-secondary;	/* redux[background-color: secondary_theme_color] */

		.dark & {
			background-color: $color-secondary;	/* redux[background-color: secondary_theme_color] */
		}
	}
	
	display: inline-block;
	color: #fff;

	&:visited {
		color: #fff; //in some cases its a link
	}

	&:active, &:focus, &:active:hover, &:focus:hover {
		color: #fff;
		background-color: $color-secondary; /* redux[background-color: secondary_theme_color] */
		text-shadow: none;		
	}

	&:hover {
		color: #fff;
		background-color: $color-primary; /* redux[background-color: main_theme_color] */
		box-shadow: inset 0px 150px 20px 50px rgba(255,255,255, 0.15);
		text-shadow: none;	

		.dark & {
			color: #fff;
		}
	}

	&:after {
		border-color: #fff;
	}
}

@mixin button-mini() {
	padding: 3px 8px;
	font-size: 80%;
	line-height: 1.5em;
}

@mixin button-small() {
	padding: 3px 10px;
	line-height: 1.5em;
}

@mixin button-normal() {
	padding: 1.25em 1.2em;
	font-size: 14px;
}

@mixin button-large() {
	padding: 1.65em 1.2em;
	font-size: 14px;
}

@mixin button-xlarge() {
	padding: 1.4em 1.5em;
	font-size: 110%;
	line-height: 1.5em;
}

@mixin form-radio-styled($bg-color: $color-light-gray, $fg-color: $color-lighter-gray) {
	input[type=radio] + label {
		display: inline-block;
		cursor: pointer;
	}

	input[type=radio] {
		display: none;
	}

	input[type=radio] + label:before {
		content: "";
		display: inline-block;
		width: 16px;
		height: 16px;
		border-radius: 8px;
		position: relative;
		top: 2px;
		margin-right: 5px;
		line-height: 1em;
		background-color: $bg-color;
		border: 4px solid $bg-color;
		@include transition(background-color 0.1s ease-in-out);
	}

	input[type=radio]:checked + label:before {
		background-color: $fg-color;
	}
}

@mixin form-checkbox-styled() {
	@include form-radio-styled();

	input[type=checkbox] {
		display: none;
	}

	label:before {
		border-radius: 0;
	}

	input[type=checkbox]:checked + label:before {
		background-color: $color-lighter-gray;
	}
}

@mixin theme-sep() {
	display: inline-block;
	path {
		fill: $color-primary;
	}
}

@mixin images-overlay() {
	content: ''; display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; height: 100%;
	background-color: rgba(0,0,0,0.3);
}

@mixin tooltip() {
	@extend %tooltip;
	@include opacity-animate-hidden(0.2s);

	&:after {
		content: '';
		position: absolute;
		background: rgba(0, 0, 0, 0);
		border: 6px solid rgba(0, 0, 0, 0);
	}
}

@mixin tooltip-left() {
	top: 50%; 
	bottom: auto;
	left: auto; 
	right: 100%;
	transform: translateY(-50%);
	margin: 0 10px 0 0;

	&:after {
		top: 50%;
		bottom: auto;
		left: 100%;
		right: auto;
		margin: -6px 0 0 0;
		border-color: transparent;
		border-left-color: $color-darker-gray;
	}
}

@mixin tooltip-right() {
	top: 50%; 
	bottom: auto;
	left: 100%;
	right: auto; 
	transform: translateY(-50%);
	margin: 0 0 0 10px;

	&:after {
		top: 50%;
		bottom: auto;
		left: auto;
		right: 100%;
		margin: -6px 0 0 0;
		border-color: transparent;
		border-right-color: $color-darker-gray;
	}
}

@mixin tooltip-top() {
	top: auto;
	bottom: 100%;  
	left: 50%;
	right: auto;
	margin: 0 0 10px 0;
	transform: translateX(-50%);

	&:after {
		top: 100%;
		bottom: auto;
		left: 50%;
		right: auto;
		margin: 0 0 0 -6px;
		border-color: transparent;
		border-top-color: $color-darker-gray;
	}	
}

@mixin tooltip-bottom() {
	top: 100%; 
	bottom: auto;
	left: 50%;
	right: auto; 
	margin: 10px 0 0 0;
	transform: translateX(-50%);

	&:after {
		top: auto;
		bottom: 100%;
		left: 50%;
		right: auto;
		margin: 0 0 0 -6px;
		border-color: transparent;
		border-bottom-color: $color-darker-gray;
	}
}

@mixin sub_li_ladder($color: $color-light-gray, $top-offset: 0, $left-offset: 0, $dark-color: darken($color, 60%) ) {
	position: relative;

	&:after { //horiz line
		content: '';
		position: absolute;
		width: 8px;
		height: 8px;
		border-left: 3px solid $color;
		border-bottom: 3px solid $color;
		left: -5px+$left-offset;
		top: 5px+$top-offset;
	}

	&:before { //vert line
		content: '';
		position: absolute;
		width: 8px;
		height: 105%;
		border-left: 3px solid $color;
		left: -5px+$left-offset;
		top: 5px+$top-offset;
	}
	
	&:last-child {
		&:after {
			border-bottom-left-radius: 1px;
		}
		&:before {
			display: none;
		}
	}

	.dark & {
		&:before,
		&:after {
			border-color: $dark-color;
		}
	}	
}

@mixin heading-small-alt() {
	@extend %uppercase;
	font-weight: 900;
	font-size: 1.2em;
	color: $color-light-gray;
	text-align: center;
}

@mixin custom-scrollbars( $width: 8px ) {
	&::-webkit-scrollbar-track {
		background-color: lighten($color-light-gray, 10%);
	}

	&::-webkit-scrollbar	{
		width: $width;
		background-color: $color-dark-gray;
	}

	&::-webkit-scrollbar-thumb {
		background-color: $color-dark-gray;
	}
}

@mixin fw-child-container() {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
	@include box-sizing(border-box);
	> .row {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		overflow-x: hidden;
		> .main-content-inner {
			padding-left: 0;
			padding-right: 0;
		}
	}
}

@mixin li_product_limit_cols($bp, $cols) {
	@include until($bp) {
		@for $i from 6 through $cols {
			&.columns-#{$i} {
				ul.products {
					li.product {
						width: 100% / $cols;
						float: left;
						clear: none;

						&:nth-child(1n) {
							clear: none;
						}

						&:nth-child(#{$cols}n+1) {
							clear: left;
						}
					}
				}
			}
		}
	}
}