$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}: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@mixin s-r-18($property) {
	#{$property}: var(--s-r-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 {
		background-color: var(--wp--custom--color--primary);
		border-color: var(--wp--custom--color--primary);
		color: var(--wp--custom--color--button-color-primary);
		fill: var(--wp--custom--color--button-color-primary);
		text-decoration: none;
	}
}

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

	&:hover {
		background-color: var(--wp--custom--color--variant-primary);
		border-color: var(--wp--custom--color--variant-primary);
		color: var(--wp--custom--color--variant-button-color-primary);
		fill: var(--wp--custom--color--variant-button-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-xxxs {
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
}

@mixin btn-xxs {
	padding: 0.563rem 1.125rem;
	font-size: 0.875rem;
}

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

@mixin btn-s {
	padding: 0.938rem 1.875rem;
	font-size: 1.125rem;
}

@mixin btn-m {
	padding: 1.125rem 2.25rem;
	font-size: 1.25rem;
}

@mixin btn-l {
	padding: 1.125rem 2.25rem;
	font-size: 1.25rem;

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

@mixin btn-xl {
	padding: 1.25rem 2.5rem;
	font-size: 1.5rem;

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

@mixin btn-xxl {
	padding: 2.25rem 4.5rem;
	font-size: 1.5rem;

	@include breakpoint(md) {
		padding: 2.875rem 5.75rem;
		font-size: 1.75rem;
	}
}

@mixin btn-xxxl {
	padding: 3rem 6rem;
	font-size: 1.5rem;

	@include breakpoint(md) {
		padding: 3.625rem 7.25rem;
		font-size: 1.75rem;
	}
}

@mixin btn-xxxxl {
	padding: 3.75rem 7.5rem;
	font-size: 1.5rem;

	@include breakpoint(md) {
		padding: 5.625rem 11.25rem;
		font-size: 1.75rem;
	}
}

/* Avatars */
@mixin avatar-l {
	width: var(--space-11);
	height: var(--space-11);
	min-width: var(--space-11);
	min-height: var(--space-11);

	@include breakpoint(sm) {
		width: var(--space-12);
		height: var(--space-12);
	}

	@include breakpoint(md) {
		width: var(--space-13);
		height: var(--space-13);
	}

	@include breakpoint(lg) {
		width: var(--space-14);
		height: var(--space-14);
	}
}

@mixin avatar-m {
	width: var(--space-09);
	height: var(--space-09);
	min-width: var(--space-09);
	min-height: var(--space-09);

	@include breakpoint(md) {
		width: var(--space-10);
		height: var(--space-10);
	}
}

@mixin avatar-s {
	width: var(--space-07);
	height: var(--space-07);
	min-width: var(--space-07);
	min-height: var(--space-07);
}

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

	&:-moz-placeholder {
		@content;
	}

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

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

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

/* Grid gaps */
@mixin gap-s {
	column-gap: 0.5rem;

	@include breakpoint(md) {
		column-gap: 0.75rem;
	}

	@include breakpoint(lg) {
		column-gap: 1rem;
	}
}

@mixin gap-m {
	column-gap: 0.75rem;

	@include breakpoint(sm) {
		column-gap: 1rem;
	}

	@include breakpoint(md) {
		column-gap: 1.25rem;
	}

	@include breakpoint(lg) {
		column-gap: 1.5rem;
	}
}

@mixin gap-l {
	column-gap: 1.5rem;

	@include breakpoint(sm) {
		column-gap: 2rem;
	}

	@include breakpoint(md) {
		column-gap: 2.5rem;
	}

	@include breakpoint(lg) {
		column-gap: 3rem;
	}
}

/* Text underlines */
@mixin underline-default {
	text-decoration-line: underline;
	text-decoration-thickness: 0.09em;
}