@use "../abstracts/mixins";

.is-layout-flex {
	--group-block-justify-content: start;
	--row-gap: var(--spacing-md);
	--column-gap: var(--spacing-md);
	gap: var(--row-gap) var(--column-gap);
}

@include mixins.mq(md) {

	.alignleft {
		float: left;
	}

	.alignright {
		float: right;
	}

	.aligncenter {
		margin-inline: auto;

		@include mixins.clearfix;
	}
}

.alignwide {
	--alignwide-max-side-spacing: max(0px, calc((var(--viewport-width) - var(--content-max-width)) / 4));
	--alignwide-side-spacing: min(var(--spacing-xxxxl), var(--alignwide-max-side-spacing));
	width: calc(100% * (var(--alignwide-side-spacing) * 2));
	max-width: var(--alignwide-max-width, unset);
	margin-right: var(--alignwide-margin-left, calc(var(--alignwide-side-spacing) * -1));
	margin-left: var(--alignwide-margin-left, calc(var(--alignwide-side-spacing) * -1));
}

.content-sidebar-wrap {

	@include mixins.mq(lg) {

		.content-sidebar &,
		.sidebar-content & {
			--alignfull-margin-right: 0;
			--alignfull-margin-left: 0;
			--alignwide-margin-right: 0;
			--alignwide-margin-left: 0;
		}
	}
}

.alignfull {
	clear: both;
	width: var(--alignfull-width, var(--viewport-width));
	max-width: var(--alignfull-max-width, var(--viewport-width));
	margin-right: var(--alignfull-margin-right, calc(50% - (50vw - (var(--scrollbar-width, 0px) / 2))));
	margin-left: var(--alignfull-margin-left, calc(50% - (50vw - (var(--scrollbar-width, 0px) / 2))));

	// Fixes Mai Divider (and other stuff) when alignfull inside of a Group or Cover block where content align is not center.
	// This needs to be accounted for in editor.scss too.

	&.wp-block-cover[style*="--cover-block-justify-content:start"] > .wp-block-cover__inner-container > .alignfull,
	&.wp-block-group[style*="--group-block-justify-content:start"] > .wp-block-group__inner-container > .alignfull {
		margin-left: calc(var(--side-spacing) * -1);
		width: var(--viewport-width);
	}

	&.wp-block-cover[style*="--cover-block-justify-content:end"] > .wp-block-cover__inner-container > .alignfull,
	&.wp-block-group[style*="--group-block-justify-content:end"] > .wp-block-group__inner-container > .alignfull {
		margin-right: calc(var(--side-spacing) * -1);
		width: var(--viewport-width);
	}
}

.content {
	--alignfull-width: auto;
}

.alignvertical {
	display: flex;
	align-content: center;
	align-items: center;
}

.has-boxed-container {

	@include mixins.mq(xl) {
		--alignfull-max-width: var(--breakpoint-xl);
		--alignfull-margin-right: auto;
		--alignfull-margin-left: auto;

		.has-content-sidebar,
		.has-sidebar-content {
			--alignfull-margin-right: calc(var(--side-spacing) * -1);
			--alignfull-margin-left: calc(var(--side-spacing) * -1);
		}

		.has-narrow-content,
		.has-standard-content {
			--alignfull-margin-right: calc((var(--site-container-max-width) - var(--content-max-width)) * -0.5);
			--alignfull-margin-left: calc((var(--site-container-max-width) - var(--content-max-width)) * -0.5);
		}

		.has-wide-content {
			--alignfull-margin-right: calc((var(--site-container-max-width) - var(--content-max-width)) - var(--side-spacing));
			--alignfull-margin-left: calc((var(--site-container-max-width) - var(--content-max-width)) - var(--side-spacing));
		}
	}
}