/**
 * Shape Divider block styles.
 * Place this block immediately before/after a Group to add an angled or
 * wavy edge. It renders full-width, zero-height-flow. To make it sit flush
 * against the neighboring Group's edge, use the block's own Margin control
 * (Styles > Dimensions > Margin in the sidebar) on whichever block needs it,
 * rather than a hidden CSS offset — that way the adjustment is visible and
 * editable directly in the editor canvas.
 */
.wp-block-aod-shape-divider {
	display: block;
	width: 100%;
	line-height: 0;
	overflow: hidden;
	pointer-events: none;
	background-color: var(--aod-bg-color, transparent);
}

/* Core's own alignfull negative-margin bleed (".has-global-padding > .alignfull")
   only applies when this block is a *direct* child of the padded content
   container, so nesting it one level deeper (e.g. inside another Group)
   leaves it trapped inside the ancestor's padding. A 100vw-based workaround
   fixes the frontend but drifts inside the block editor's scaled iframe
   canvas, so instead reuse the same root-padding custom properties core
   itself sets on `:root` — those inherit at any depth in both the frontend
   and the editor — without the direct-child restriction. */
.wp-block-aod-shape-divider.alignfull {
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
	width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px));
	max-width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px));
}

/* Horizontal and vertical flip are composed server-side into --aod-scale-x /
   --aod-scale-y (each ±1), so any combination — including position's default
   vertical flip plus a manual vertical-flip override — resolves to a single
   correct transform instead of stacking conflicting CSS classes. */
.aod-shape-divider__svg {
	display: block;
	width: 100%;
	height: var(--aod-shape-height, 80px);
	fill: var(--aod-shape-color, #faf8f5);
	transform: scale(var(--aod-scale-x, 1), var(--aod-scale-y, 1));
}

.aod-shape-divider__clip {
	width: 100%;
	height: var(--aod-shape-height, 80px);
	background-color: var(--aod-shape-color, #faf8f5);
	clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
	transform: scale(var(--aod-scale-x, 1), var(--aod-scale-y, 1));
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-aod-shape-divider * {
		transition: none;
	}
}