/// Size an element
@mixin size($width, $height: $width) {
	width: $width;
	height: $height;
}

/// Add left/right padding to an element
@mixin padding-x($left: var(--wp--style--root--padding-left), $right: var(--wp--style--root--padding-right)) {
	padding-left: $left;
	padding-right: $right;
}

/// Add top/bottom padding to an element
@mixin padding-y($top: var(--wp--style--root--padding-top), $bottom: var(--wp--style--root--padding-bottom)) {
	padding-top: $top;
	padding-bottom: $bottom;
}

/// Add padding to an element
@mixin padding(
	$top: var(--wp--style--root--padding-top),
	$right: var(--wp--style--root--padding-right),
	$bottom: var(--wp--style--root--padding-bottom),
	$left: var(--wp--style--root--padding-left)
) {
	@include padding-y($top, $bottom);
	@include padding-x($left, $right);
}

/// Add left/right margin to an element
@mixin margin-x($right, $left: $right) {
	margin-left: $left;
	margin-right: $right;
}

/// Add top/bottom padding to an element
@mixin margin-y($top, $bottom: $top) {
	padding-top: $top;
	padding-bottom: $bottom;
}

/// Add margin to an element
@mixin margin($top, $right: $top, $bottom: $top, $left: $right) {
	@include margin-y($top, $bottom);
	@include margin-x($left, $right);
}

/// Simple fade-in animation
/// @param {String} $type - "show" or "hide", defaults to "show"
/// @param {Number} $delay - Animation delay in seconds
/// @param {Number} $duration - Animation duration in seconds
/// @param {String} $timing-function - Animation timing function, defaults to "ease-in"
@mixin fade($type: "show", $delay: 0s, $duration: 0.5s, $timing-function: ease-in) {
	@if $type == "hide" {
		animation: $duration hideAnimation $timing-function;
		animation-delay: $delay;
		animation-fill-mode: forwards;
		@keyframes hideAnimation {
			to {
				visibility: hidden;
				opacity: 0;
			}
		}
	} @else if $type == "show" {
		animation: $duration fadeInAnimation $timing-function;
		animation-delay: $delay;
		animation-iteration-count: 1;
		@keyframes fadeInAnimation {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
	}
}

/// Flow mixin
@mixin flow($gap: var(--wp--style--block-gap)) {
	& > * + * {
		margin-top: $gap;
	}
}

/// Container mixins
@mixin container($type: "default") {
	@if $type == "default" {
		max-width: var(--wp--style--global--content-size);
		@include margin-x(auto);
	} @else if $type == "wide" {
		max-width: var(--wp--style--global--wide-size);
		@include margin-x(auto);
	} @else if $type == "full" {
		max-width: 100%;
		@include margin-x(auto);
	}
}

/// Blocks alignment mixin
@mixin blocks-alignment() {
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
	& > *,
	.is-layout-flow > * {
		@include margin-x(auto);
		max-width: var(--wp--style--global--content-size);
		&:where(.alignfull) {
			margin-right: calc(var(--wp--style--root--padding-right) * -1);
			margin-left: calc(var(--wp--style--root--padding-left) * -1);
			max-width: calc(100% + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));
		}
		&:where(.alignwide) {
			max-width: var(--wp--style--global--wide-size);
		}
		&:where(.alignleft) {
			margin-left: 0;
			float: left;
			margin-right: var(--wp--style--block-gap);
		}
		&:where(.alignright) {
			margin-right: 0;
			float: right;
			margin-left: var(--wp--style--block-gap);
		}
	}
	.is-layout-flow > * {
		padding-right: var(--wp--style--root--padding-right);
		padding-left: var(--wp--style--root--padding-left);
	}
}

/// Always visually hidden, but accessible to screen readers
@mixin always-visually-hidden() {
	border: 0;
	clip: rect(0 0 0 0);
	height: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/// Visually hidden, accessible to screen readers, but visible on focus
@mixin visually-hidden() {
	&:not(:focus):not(:active) {
		@include always-visually-hidden();
	}
}
