$x: var(--wp--custom--box-shadow--x, 0);
$y: var(--wp--custom--box-shadow--y, 1px);
$blur: var(--wp--custom--box-shadow--blur, 2px);
$spread: var(--wp--custom--box-shadow--spread, 0);
$zIndex: var(--wp--custom--box-shadow--z-index, -1);
$background: var(--wp--custom--box-shadow--gradient, var(--wp--custom--box-shadow--color));

@mixin boxShadow {
	position: relative;

	&:before {
		content: " ";
		height: calc(100% + (#{$spread}));
		width: calc(100% + (#{$spread}));
		z-index: $zIndex;
		position: absolute;
		left: calc(#{$x} - (#{$spread} / 2));
		top: calc(#{$y} - (#{$spread} / 2));
		filter: blur(#{$blur});
		background: $background;
		border-radius: inherit;
	}
}

.has-box-shadow {
	@include boxShadow;
}

// 781px hardcoded in core.
@media (max-width: 781px) {
	.is-reverse-on-mobile {
		flex-direction: column-reverse;
	}

	.is-nowrap.is-reverse-on-mobile {
		flex-direction: row-reverse;
	}
}