/*
 * Floats in the text column (divb-hq#256, docs/core/floats.md).
 *
 * Core floats a block aligned left or right to the edge of its CONTAINER. The post content
 * is `alignfull` on this blog, so that edge is the viewport's, 252px outside the text at
 * 1512px. The offset below moves the float onto the column's edge: half of what the
 * container has beyond the column, and never less than nothing, so a container narrower
 * than the column (a phone) keeps core's float as it was.
 *
 * The column is the container's own when its layout sets one — `Mf_Suite_Floats` writes it
 * onto the container as --mf-content-size — and the global content size otherwise.
 *
 * **Why the property is registered, and why the float inherits it by hand:** a custom
 * property inherits by default, so a nested group without a width of its own would borrow
 * its parent's 800px while its text runs at the global 620px. Registered as non-inheriting,
 * the value stays on the container that set it; the float takes its own parent's value
 * with an explicit `inherit`, and where the parent set none that is the guaranteed-invalid
 * initial value, so var() falls back to the global size.
 *
 * **Why `:root` is in the selector:** this sheet loads before the global styles, so a rule
 * of core's specificity (`.is-layout-constrained > .alignleft`, 0,2,0) loses to core's
 * own `margin-inline-start: 0`. `:root` is one pseudo-class more, and nothing else.
 */

@property --mf-content-size {
	syntax: "*";
	inherits: false;
}

/* The parent's own column, or the global one. */
:root .is-layout-constrained > :is(.alignleft, .alignright) {
	--mf-content-size: inherit;
	--mf-float-column: var(--mf-content-size, var(--wp--style--global--content-size, 100%));
}

:root .is-layout-constrained > .alignleft {
	margin-inline-start: max(0px, (100% - var(--mf-float-column)) / 2);
}

:root .is-layout-constrained > .alignright {
	margin-inline-end: max(0px, (100% - var(--mf-float-column)) / 2);
}