$var: true !default; // Can be overridden elsewhere

/*--------------------------------------------------------------
	* Responsive Breakpoints

		 @include breakpoint(768)	{ } sm
		 @include breakpoint(1024)	{ } md
		 @include breakpoint(1280)	{ } lg
		 @include breakpoint(1536)	{ } xl
		 @include breakpoint(1140)	{ } header
	* ------------------------------------------------------------ */
@mixin breakpoint($class) {
	@if $class==sm {
		@media (min-width: 48em) {
			@content;
		}
	}

	@else if $class==md {
		@media (min-width: 64em) {
			@content;
		}
	}

	@else if $class==lg {
		@media (min-width: 80em) {
			@content;
		}
	}

	@else if $class==xl {
		@media (min-width: 96em) {
			@content;
		}
	}

	@else if $class==header {
		@media (min-width: 71.25em) {
			@content;
		}
	}

	@else {
		@warn "Breakpoint mixin supports: sm, md, lg, xl, header";
	}
}

/* Centering */
@mixin push--auto {
	margin: {
		left: auto;
		right: auto;
	}
}

/* Flexbox */
@mixin flexbox {
	display: flex;
}

@mixin flex-center {
	align-items: center;
	justify-content: center;
}

/* Responsive Spacing */
@mixin s-r-0($property) {
	#{$property}: $s-0;
}

@mixin s-r-1($property) {
	#{$property}: $s-1;
}

@mixin s-r-2($property) {
	#{$property}: $s-2;
}

@mixin s-r-3($property) {
	#{$property}: $s-3;
}

@mixin s-r-4($property) {
	#{$property}: $s-4;
}

@mixin s-r-5($property) {
	#{$property}: $s-4;

	@include breakpoint(lg) {
		#{$property}: $s-5;
	}
}

@mixin s-r-6($property) {
	#{$property}: $s-4;

	@include breakpoint(md) {
		#{$property}: $s-5;
	}

	@include breakpoint(lg) {
		#{$property}: $s-6;
	}
}

@mixin s-r-7($property) {
	#{$property}: $s-4;

	@include breakpoint(sm) {
		#{$property}: $s-5;
	}

	@include breakpoint(md) {
		#{$property}: $s-6;
	}

	@include breakpoint(lg) {
		#{$property}: $s-7;
	}
}

@mixin s-r-8($property) {
	#{$property}: $s-5;

	@include breakpoint(sm) {
		#{$property}: $s-6;
	}

	@include breakpoint(md) {
		#{$property}: $s-7;
	}

	@include breakpoint(lg) {
		#{$property}: $s-8;
	}
}

@mixin s-r-9($property) {
	#{$property}: $s-6;

	@include breakpoint(sm) {
		#{$property}: $s-7;
	}

	@include breakpoint(md) {
		#{$property}: $s-8;
	}

	@include breakpoint(lg) {
		#{$property}: $s-9;
	}
}

@mixin s-r-10($property) {
	#{$property}: $s-7;

	@include breakpoint(sm) {
		#{$property}: $s-8;
	}

	@include breakpoint(md) {
		#{$property}: $s-9;
	}

	@include breakpoint(lg) {
		#{$property}: $s-10;
	}
}

@mixin s-r-11($property) {
	#{$property}: $s-8;

	@include breakpoint(sm) {
		#{$property}: $s-9;
	}

	@include breakpoint(md) {
		#{$property}: $s-10;
	}

	@include breakpoint(lg) {
		#{$property}: $s-11;
	}
}

@mixin s-r-12($property) {
	#{$property}: $s-9;

	@include breakpoint(sm) {
		#{$property}: $s-10;
	}

	@include breakpoint(md) {
		#{$property}: $s-11;
	}

	@include breakpoint(lg) {
		#{$property}: $s-12;
	}
}

@mixin s-r-13($property) {
	#{$property}: $s-10;

	@include breakpoint(sm) {
		#{$property}: $s-11;
	}

	@include breakpoint(md) {
		#{$property}: $s-12;
	}

	@include breakpoint(lg) {
		#{$property}: $s-13;
	}
}

@mixin s-r-14($property) {
	#{$property}: $s-11;

	@include breakpoint(sm) {
		#{$property}: $s-12;
	}

	@include breakpoint(md) {
		#{$property}: $s-13;
	}

	@include breakpoint(lg) {
		#{$property}: $s-14;
	}
}

@mixin s-r-15($property) {
	#{$property}: $s-12;

	@include breakpoint(sm) {
		#{$property}: $s-13;
	}

	@include breakpoint(md) {
		#{$property}: $s-14;
	}

	@include breakpoint(lg) {
		#{$property}: $s-15;
	}
}

@mixin s-r-16($property) {
	#{$property}: $s-13;

	@include breakpoint(sm) {
		#{$property}: $s-14;
	}

	@include breakpoint(md) {
		#{$property}: $s-15;
	}

	@include breakpoint(lg) {
		#{$property}: $s-16;
	}
}

@mixin s-r-17($property) {
	#{$property}: $s-14;

	@include breakpoint(sm) {
		#{$property}: $s-15;
	}

	@include breakpoint(md) {
		#{$property}: $s-16;
	}

	@include breakpoint(lg) {
		#{$property}: $s-17;
	}
}

@mixin s-r-18($property) {
	#{$property}: $s-15;

	@include breakpoint(sm) {
		#{$property}: $s-16;
	}

	@include breakpoint(md) {
		#{$property}: $s-17;
	}

	@include breakpoint(lg) {
		#{$property}: $s-18;
	}
}

/* Buttons */
@mixin btn {
	display: inline-block;
	line-height: var(--global--line-height-reset);
	font-weight: normal;
}

@mixin btn-primary {
	color: var(--wp--custom--color--button-color-primary);
	fill: var(--wp--custom--color--button-color-primary);
	background-color: var(--wp--custom--color--primary);

	&:hover {
		background-color: var(--wp--custom--color--secondary);
		text-decoration: none;
	}
}

@mixin btn-tab {
	color: var(--wp--custom--color--font-secondary);
	fill: var(--wp--custom--color--font-secondary);
	background-color: transparent;
	border: 1px solid var(--global--color--border);

	&:hover {
		background-color: var(--global--color--border);
		border: 1px solid var(--global--color--border);
	}
}

@mixin btn-outline {
	color: var(--wp--custom--color--primary);
	fill: var(--wp--custom--color--primary);
	border: 1px solid;
	border-color: var(--wp--custom--color--primary);

	&:hover {
		border-color: var(--wp--custom--color--primary);
		color: var(--wp--custom--color--primary);
		fill: var(--wp--custom--color--primary);
		text-decoration: none;
	}
}

@mixin btn-naked {
	display: inline-block;
	font-weight: normal;
	color: var(--wp--custom--color--font-primary);
	fill: var(--wp--custom--color--font-primary);

	&:hover {
		color: var(--wp--custom--color--primary);
		fill: var(--wp--custom--color--primary);
	}
}

/* Button Sizes */
@mixin btn-xxs {
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
}

@mixin btn-xs {
	padding: 0.875rem 1.5rem;
	font-size: 0.875rem;
}

@mixin btn-s {
	padding: 1rem 2rem;
	font-size: 1rem;
}

@mixin btn-m {
	padding: 1rem 2rem;
	font-size: 1.125rem; //18px

	@include breakpoint(lg) {
		padding: 1.25rem 2.5rem;
		font-size: 1.25rem; //20px
	}
}

@mixin btn-l {
	padding: 1rem 2rem;
	font-size: 1.25rem;

	@include breakpoint(md) {
		padding: 1.25rem 2.5rem;
		font-size: 1.375rem;
	}

	@include breakpoint(lg) {
		padding: 1.5rem 3rem;
		font-size: 1.5rem;
	}
}

@mixin btn-xl {
	padding: 1rem 2rem;
	font-size: 1.375rem;

	@include breakpoint(sm) {
		padding: 1.25rem 2.5rem;
		font-size: 1.5rem;
	}

	@include breakpoint(md) {
		padding: 1.5rem 3rem;
		font-size: 1.625rem;
	}

	@include breakpoint(lg) {
		padding: 2rem 4rem;
		font-size: 1.75rem;
	}
}

@mixin btn-xxl {
	padding: 1.5rem 3rem;
	font-size: 1.375rem;

	@include breakpoint(sm) {
		padding: 2rem 4rem;
		font-size: 1.5rem;
	}

	@include breakpoint(md) {
		padding: 2.5rem 5rem;
		font-size: 1.625rem;
	}

	@include breakpoint(lg) {
		padding: 3rem 6rem;
		font-size: 1.75rem;
	}
}

@mixin btn-xxxl {
	padding: 2.5rem 5rem;
	font-size: 1.375rem;

	@include breakpoint(sm) {
		padding: 3rem 6rem;
		font-size: 1.5rem;
	}

	@include breakpoint(md) {
		padding: 4rem 8rem;
		font-size: 1.625rem;
	}

	@include breakpoint(lg) {
		padding: 5rem 10rem;
		font-size: 1.75rem;
	}
}

@mixin btn-xxxxl {
	padding: 4rem 8rem;
	font-size: 1.375rem;

	@include breakpoint(sm) {
		padding: 5rem 10rem;
		font-size: 1.5rem;
	}

	@include breakpoint(md) {
		padding: 6rem 12rem;
		font-size: 1.625rem;
	}

	@include breakpoint(lg) {
		padding: 7.5rem 15rem;
		font-size: 1.75rem;
	}
}

/* Avatars */
@mixin avatar-l {
	width: $s-11;
	height: $s-11;
	min-width: $s-11;
	min-height: $s-11;

	@include breakpoint(sm) {
		width: $s-12;
		height: $s-12;
	}

	@include breakpoint(md) {
		width: $s-13;
		height: $s-13;
	}

	@include breakpoint(lg) {
		width: $s-14;
		height: $s-14;
	}
}

@mixin avatar-m {
	width: $s-9;
	height: $s-9;
	min-width: $s-9;
	min-height: $s-9;

	@include breakpoint(sm) {
		width: $s-10;
		height: $s-10;
	}
}

@mixin avatar-s {
	width: $s-8;
	height: $s-8;
	min-width: $s-8;
	min-height: $s-8;
}

/* Divider short */
@mixin divider {
	content: "";
	display: block;
	background-color: var(--wp--custom--color--border);
	height: 1px;
	margin-left: $s-2;
	margin-right: $s-2;
}

@mixin divider-s {
	@include s-r-8 (width);
}

@mixin divider-m {
	@include s-r-9 (width);
}

/* Placeholders */
@mixin input-placeholder {
	&.placeholder {
		@content;
	}

	&:-moz-placeholder {
		@content;
	}

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

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

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

/* Grid gaps */
@mixin col-padding {
	padding-left: $s-4;
	padding-right: $s-4;

	@include breakpoint(sm) {
		padding-left: $s-6;
		padding-right: $s-6;
	}
}

@mixin col-gaps {

	@include breakpoint(sm) {
		margin-left: $s-4;
		margin-right: $s-4;
	}

	@include breakpoint(lg) {
		margin-left: $s-6;
		margin-right: $s-6;
	}
}

/* Shadows */
@mixin shadow-1 {
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}

@mixin shadow-2 {
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
	-webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
}

@mixin shadow-3 {
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
}

@mixin shadow-4 {
	box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.1);
}

@mixin shadow-none {
	box-shadow: none;
	-webkit-box-shadow: none;
}

/* Transitions */
@mixin transition-default {
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

@mixin transition-posthover {
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

@mixin avatar-transition {
	-webkit-transform: translate(0px, -2px);
	transform: translate(0px, -2px);
}

/* Animations */
@mixin scale {
	-webkit-transform: scale(1.01);
	transform: scale(1.01);
}

/* Retina Images */
@mixin image-2x($image, $width, $height) {

	@media (min--moz-device-pixel-ratio: 1.3),
	(-webkit-min-device-pixel-ratio: 1.3),
	(min-device-pixel-ratio: 1.3),
	(min-resolution: 1.3dppx) {
		background-image: url($image);
		background-size: $width $height;
	}
}