/*
	Not a .flex-section UNLESS a Background colour is chosen (see
	vertical-space.php) — left blank, it must not pick up section margin/
	padding, it IS the gap. min-height (not height) because a coloured band
	also gets padding-block back from layout.css's band rules, and the two
	need to add rather than fight over the box's final size.
*/
.flex-section--vertical-space {
	&.is-small {
		min-height: var(--space-6);
	}

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

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

	/*
		The line itself lives inside a real .container in the markup (see
		vertical-space.php) so it gets the exact same max-width/gutter as
		every other content-area element, rather than reimplementing that
		math here — flex + align-items: center is just what centres that
		.container vertically within this block's own height.
	*/
	&.has-divider {
		display: flex;
		align-items: center;
	}
}

/*
	Colour comes from --section-fg (set by whichever bg-* class is on the
	parent .flex-section--vertical-space — see layout.css's Background
	tokens), not a fixed grey: 30% of the dark brand green on a light/
	default background, 30% white on Dark/Accent. One rule covers both
	cases without needing to know which background is active.
*/
.vertical-space__divider {
	display: block;
	width: 100%;
	height: 1px;
	background-color: color-mix(in srgb, var(--section-fg) 30%, transparent);
}