@use "../abstracts/mixins";

// These props needs to be set on both classes because
// they are generated on the container for many uses,
// but Mai Columns generates the sizes on the column itself.
// Even worse trickery in editor.scss.
// It should all be easier with ACF block API v2 coming in ACF 6.0.
.has-columns,
.is-column {
	--flex-basis: calc((100% * var(--columns) - (var(--column-gap) * (1 - var(--columns)))) - 0.025px); // Removes 0.025px to prevent margin collapsing.
	--flex-default: 0 0 var(--flex-basis);

	@include mixins.mq(false, sm) {
		--flex: var(--flex-xs, var(--flex-default));
		--columns: var(--columns-xs, 1);
	}

	@include mixins.mq(sm, md) {
		--flex: var(--flex-sm, var(--flex-default));
		--columns: var(--columns-sm, 1);
	}

	@include mixins.mq(md, lg) {
		--flex: var(--flex-md, var(--flex-default));
		--columns: var(--columns-md, 1);
	}

	@include mixins.mq(lg) {
		--flex: var(--flex-lg, var(--flex-default));
		--columns: var(--columns-lg, 1);
	}
}

.has-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--row-gap) var(--column-gap);
	align-items: var(--align-columns-vertical, initial); // Needs initial for nested columns.
	justify-content: var(--align-columns, initial); // Needs initial for nested columns.
}

.is-column {
	flex: var(--flex, var(--flex-default));
	order: var(--order, unset);
	// Fixes search block weirdness and other flex issues.
	// @link https://defensivecss.dev/tip/flexbox-min-content-size/
	// @link https://dfmcphee.com/flex-items-and-min-width-0/
	min-width: 0;

	@include mixins.mq(false, sm) {
		--order: var(--order-xs, initial);
	}

	@include mixins.mq(sm, md) {
		--order: var(--order-sm, initial);
	}

	@include mixins.mq(md, lg) {
		--order: var(--order-md, initial);
	}
}

// This is for nested blocks where both use order values.

.is-column:not([style*="--order-xs"]) {
	--order-xs: initial;
}

.is-column:not([style*="--order-sm"]) {
	--order-sm: initial;
}

.is-column:not([style*="--order-md"]) {
	--order-md: initial;
}