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

// Responsive Breakpoints
@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==xxl {
		@media (min-width: 120em) {
			@content;
		}
	}

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

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

/* Button styles */
@mixin transition-default {
	transition: all 0.2s ease;
}

@mixin btn {
	display: inline-flex;
	justify-content: center;
	line-height: var(--global--line-height-reset);
	font-weight: normal;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

@mixin focus-visible {
	&:focus-visible {
		outline-offset: 2px;
		outline: 2px solid var(--wp--preset--color--surface-brand-primary);
	}
}


// Start: Change this default button style on theme basis
@mixin btn-default {
	background-color: var(--wp--preset--color--surface-brand-primary) !important;
	color: var(--wp--preset--color--text-on) !important;

	&:hover {
		background-color: var(--wp--preset--color--surface-brand-secondary) !important;
	}
}

@mixin btn-default-variant {
	background-color: var(--wp--preset--color--variant-surface-brand-primary) !important;
	color: var(--wp--preset--color--variant-text-on) !important;

	&:hover {
		background-color: var(--wp--preset--color--variant-surface-brand-secondary) !important;
	}
}
// End: Change this default button style on theme basis


@mixin btn-primary {
	background-color: var(--wp--preset--color--surface-brand-primary);
	color: var(--wp--preset--color--text-on);
	fill: var(--wp--preset--color--text-on);

	a {

		&:hover {
			background-color: var(--wp--preset--color--surface-brand-secondary) !important;
			color: var(--wp--preset--color--text-on) !important;
			fill: var(--wp--preset--color--text-on) !important;
		}
	}
}

@mixin btn-primary-variant {
	background-color: var(--wp--preset--color--variant-surface-brand-primary);
	color: var(--wp--preset--color--variant-text-on);
	fill: var(--wp--preset--color--variant-text-on);

	a {
		&:hover {
			background-color: var(--wp--preset--color--variant-surface-brand-secondary) !important;
			color: var(--wp--preset--color--variant-text-on) !important;
			fill: var(--wp--preset--color--variant-text-on) !important;
		}
	}
}

@mixin btn-ghost {
	color: var(--wp--preset--color--quarternary);
	fill: var(--wp--preset--color--quarternary);

	a {

		&:hover {
			background-color: var(--wp--preset--color--surface-brand-secondary) !important;
			color: var(--wp--preset--color--quarternary) !important;
		}
	}
}

@mixin btn-ghost-variant {
	color: var(--wp--preset--color--variant-quarternary);
	fill: var(--wp--preset--color--variant-quarternary);

	a {

		&:hover {
			background-color: var(--wp--preset--color--variant-text-brand) !important;
			color: var(--wp--preset--color--variant-quarternary) !important;
		}
	}
}

@mixin btn-text {
	text-decoration: none;
	color: var(--wp--preset--color--quarternary) !important;
	fill: var(--wp--preset--color--quarternary) !important;
}

@mixin btn-text-variant {
	color: var(--wp--preset--color--variant-quarternary) !important;
	fill: var(--wp--preset--color--variant-quarternary) !important;
}

@mixin btn-text-hover {

	&::after {
		content: '';
		width: 0px;
		height: 1px;
		display: block;
		background: currentColor;
		transition: all .2s ease;
	}

	&:hover:after {
		width: 100%;
	}

	&::after,
	&:active::after {
		transform: scaleX(1);
	}
}

@mixin btn-tab {
	text-decoration: none;
	background: var(--wp--preset--color--surface-primary);
	color: var(--wp--preset--color--neutral-primary);
	border: 1px solid var(--wp--preset--color--neutral-quarternary);

	&:hover {
		background-color: var(--wp--preset--color--neutral-tertiary);
		border: 1px solid var(--wp--preset--color--neutral-quarternary);
	}
}

@mixin btn-tab-clean {
	text-decoration: none;
	background: transparent;
	color: var(--wp--preset--color--text-secondary);

	&:hover {
		background-color: var(--wp--preset--color--surface-secondary);
	}
}

/* Button sizes */
@mixin btn-xxxs {
	padding: 0.375rem 0.5rem;
	font-size: 0.75rem;
}
@mixin btn-xxs {
	padding: 0.5rem 0.625rem;
	font-size: 0.875rem;
}

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

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

@mixin btn-m {
	padding: 1rem 1.313rem;
	font-size: 1rem;
}

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


/* Avatars */
@mixin avatar-l {
	width: 5rem;
	height: 5rem;
	min-width: 5rem;
	min-height: 5rem;

	@include breakpoint(sm) {
		width: 6rem;
		height: 6rem;
	}

	@include breakpoint(md) {
		width: 7.5rem;
		height: 7.5rem;
	}

	@include breakpoint(lg) {
		width: 9rem;
		height: 9rem;
	}
}

@mixin avatar-m {
	width: 2.5rem;
	height: 2.5rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
}

@mixin avatar-s {
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
	min-height: 2rem;
}

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

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

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

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

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

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

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

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

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

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

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