@use "../abstracts/__index" as *;

.clear, // WooCommerce and likely other plugins.
.clearfix {
	clear: both;
}

.inline {
	--input-display: inline-block;
	--input-width: auto;
}

.has-dark-background {

	@extend %dark-bg !optional;
}

.has-light-background {
	--heading-color: var(--color-heading);
	color: var(--color-body);
}

/**
 * Start crazy CSS to override block-library styles.
 * This is really only here for nested cover/group blocks.
 */

.has-dark-background h1:not(.has-text-color),
.has-dark-background h2:not(.has-text-color),
.has-dark-background h3:not(.has-text-color),
.has-dark-background h4:not(.has-text-color),
.has-dark-background h5:not(.has-text-color),
.has-light-background h1:not(.has-text-color),
.has-light-background h2:not(.has-text-color),
.has-light-background h3:not(.has-text-color),
.has-light-background h4:not(.has-text-color),
.has-light-background h5:not(.has-text-color),
.has-light-background h6:not(.has-text-color) {
	color: var(--heading-color);
}

/**
 * End crazy CSS to override block-library styles.
 */

.has-border {
	border: var(--border);
}

.has-border-radius {
	overflow: hidden; // Needed so content doesn't bleed out. I hope this doesn't cause issues elsewhere, when we want overlap.
	border-radius: var(--border-radius);
}

.has-shadow {
	position: relative;
	z-index: 1; // Needed when Mai Column (or similar) has shadow with no column gap. Position relative is only here so z-index works too.
	box-shadow: var(--shadow);
}

.has-drop-shadow {
	filter: var(--drop-shadow);
}

.is-sticky {
	position: sticky !important;
	top: var(--scroll-margin-top); // Respects sticky header height.
	z-index: 9;
}

.is-circle,
.is-square {
	aspect-ratio: 1/1;
}

.is-circle {
	overflow: hidden;
	border-radius: 9999px;
}

.is-rounded {
	border-radius: var(--border-radius);
}

.is-boxed {
	margin: 0 0 var(--spacing-md);
	padding: var(--spacing-xl);
	border: var(--border);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
}

.is-full-height {
	min-height: calc(100vh - (var(--content-sidebar-wrap-margin-top) + var(--content-sidebar-wrap-margin-bottom)));
}

// TODO: Maybe add z index scale.
.z-index-1 {
	z-index: 1;
}

.full-width {
	width: 100%;
}

.has-no-margin-top {
	margin-top: 0 !important;

	> figure {
		margin-top: 0;
	}
}

.has-no-margin-bottom {
	margin-bottom: 0 !important;

	> figure {
		margin-bottom: 0;
	}
}

.has-no-margin-left {
	margin-left: 0 !important;
}

.has-no-margin-right {
	margin-right: 0 !important;
}

@each $breakpoint-name, $breakpoint-size in $breakpoints {

	.has-#{ $breakpoint-name }-max-width {
		max-width: var(--breakpoint-#{ $breakpoint-name });
		margin-inline: auto;
	}

	.has-#{ $breakpoint-name }-content-width {
		--content-max-width: var(--breakpoint-#{ $breakpoint-name });
	}
}

.has-no-content-width {
	--content-max-width: var(--viewport-width);
	--side-spacing: 0;
}

.has-no-padding {
	padding: 0 !important;
}

.has-auto-margin-top {
	margin-top: auto !important;
}

.has-auto-margin-bottom {
	margin-bottom: auto !important;
}

.has-auto-margin-left {
	margin-left: auto !important;
}

.has-auto-margin-right {
	margin-right: auto !important;
}

@each $spacing-name, $spacing-size in $spacing {

	.has-#{ $spacing-name }-margin-top {
		margin-top: var(--spacing-#{ $spacing-name }) !important;
	}

	.has-#{ $spacing-name }-margin-right {
		margin-right: var(--spacing-#{ $spacing-name }) !important;
	}

	.has-#{ $spacing-name }-margin-bottom {
		margin-bottom: var(--spacing-#{ $spacing-name }) !important;
	}

	.has-#{ $spacing-name }-margin-left {
		margin-left: var(--spacing-#{ $spacing-name }) !important;
	}

	.has-#{ $spacing-name }-padding {
		padding: var(--spacing-#{ $spacing-name }) !important;
	}
}

// This is in editor.scss too, for block settings.

.has--xxxxs-margin-top,
.has--xxxs-margin-top,
.has--xxs-margin-top,
.has--xs-margin-top,
.has--sm-margin-top,
.has--md-margin-top,
.has--lg-margin-top,
.has--xl-margin-top,
.has--xxl-margin-top,
.has--xxxl-margin-top,
.has--xxxxl-margin-top {
	position: relative;
	z-index: 1;
}

@include mq(md) {

	.has--xxxxs-margin-bottom,
	.has--xxxs-margin-bottom,
	.has--xxs-margin-bottom,
	.has--xs-margin-bottom,
	.has--sm-margin-bottom,
	.has--md-margin-bottom,
	.has--lg-margin-bottom,
	.has--xl-margin-bottom,
	.has--xxl-margin-bottom,
	.has--xxxl-margin-bottom,
	.has--xxxxl-margin-bottom {
		position: relative;
		z-index: 1;
	}
}

@each $spacing-name, $spacing-size in $spacing {

	.has--#{ $spacing-name }-margin-top {
		margin-top: calc(var(--spacing-#{ $spacing-name }) * -1) !important;
	}

	.has--#{ $spacing-name }-margin-bottom {
		margin-bottom: calc(var(--spacing-#{ $spacing-name }) * -1) !important;
	}
}

@include mq(md) {

	@each $spacing-name, $spacing-size in $spacing {

		.has--#{ $spacing-name }-margin-right {
			margin-right: calc(var(--spacing-#{ $spacing-name }) * -1) !important;
		}

		.has--#{ $spacing-name }-margin-left {
			margin-left: calc(var(--spacing-#{ $spacing-name }) * -1) !important;
		}
	}
}

// No longer used by default on group/cover blocks, but here for backwards compatibility.
.has-overlap {
	position: relative;
	z-index: 1;
	overflow: visible;
}

:where([class*="has-z-index-"]) {
	position: relative;
}

.has-z-index--1 {
	z-index: -1 !important;
}

.has-z-index-0 {
	z-index: 0 !important;
}

.has-z-index-1 {
	z-index: 1 !important;
}

.has-z-index-2 {
	z-index: 2 !important;
}

// TODO: Use custom properties?
// If so, update editor.scss to match.
@each $padding-name, $padding-size in $padding_scale {

	@each $padding-setting in $padding_settings {

		.has-#{ $padding-name }-padding-#{ $padding-setting } {
			padding-#{ $padding-setting }: var(--padding-#{ $padding-setting }-#{ $padding-name }, $padding-size);
		}
	}
}

@include mq(false, sm) {

	.hidden-xs:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

@include mq(sm, md) {

	.hidden-sm:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

@include mq(md, lg) {

	.hidden-md:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

@include mq(lg, xl) {

	.hidden-lg:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

@include mq(xs) {

	.hidden-xs-up:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

@include mq(sm) {

	.hidden-sm-up:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

@include mq(md) {

	.hidden-md-up:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

@include mq(lg) {

	.hidden-lg-up:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

@include mq(xl) {

	.hidden-xl-up:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

//

@include mq(false, xs) {

	.hidden-xs-down:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

@include mq(false, sm) {

	.hidden-sm-down:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

@include mq(false, md) {

	.hidden-md-down:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

@include mq(false, lg) {

	.hidden-lg-down:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

@include mq(false, xl) {

	.hidden-xl-down:not([class*="block-editor"]) {
		display: none !important;
		visibility: hidden !important;
	}
}

.mai-icon-container {
	position: relative;

	.mai-cart-total {
		position: var(--cart-total-position, absolute);
		top: calc(0.5em * -1);
		right: calc(0.5em * -1);
	}
}

.mai-cart-total:not(:empty) {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--cart-total-padding, var(--spacing-xxs));
	overflow: hidden;
	color: var(--cart-total-color, white);
	font-size: var(--cart-total-font-size, 0.75rem); /* em was breaking when menu size was larger */
	line-height: 0;
	background: var(--cart-total-background, var(--color-danger));
}