/*
	Deliberately not a .flex-section — it must not pick up section padding, it
	IS padding. Heights come from the spacing scale rather than an editor's
	arbitrary pixel value.

	display: flex + align-items: center only matters when Divider is on — it's
	what centers the <hr> within the space's own height rather than sitting
	at its top edge. Harmless with no divider, since there's nothing to align.
*/
.flex-section--vertical-space {
	display: flex;
	align-items: center;

	&.is-small {
		height: var(--space-6);
	}

	&.is-medium {
		height: var(--space-9);
	}

	&.is-large {
		height: var(--space-11);
	}

	&.is-xl {
		height: var(--space-12);
	}
}

/*
	A plain <hr> reset to a single 1px rule — border-block-start rather than
	the default border-block-end/-inline mix so only the top edge draws.
	--color-border is the same "muted line" token used for every other
	divider-ish rule in the theme (blockquotes, tables, the footer's legal
	bar) — not the Muted surface pair (--color-muted-bg/-fg), which is a
	background/text pairing for whole sections, not a subtle line.
*/
.vertical-space__divider {
	margin: 0;
	border: none;
	border-block-start: 1px solid var(--color-border);
}