/*
 * Block layout scale: named Block Spacing (margin between blocks) and Inner
 * Padding (padding inside a section) tokens. The ACF select's stored value IS
 * the class name. See conf-engineering/docs/spacing-and-layout.md.
 */

/* Block Spacing (margin) */
.block-spacing-none-top    { margin-top: 0; }
.block-spacing-s-top       { margin-top: 1rem; }
.block-spacing-m-top       { margin-top: 2rem; }
.block-spacing-l-top       { margin-top: 3rem; }
.block-spacing-xl-top      { margin-top: 4rem; }
.block-spacing-xxl-top     { margin-top: 6rem; }
.block-spacing-none-bottom { margin-bottom: 0; }
.block-spacing-s-bottom    { margin-bottom: 1rem; }
.block-spacing-m-bottom    { margin-bottom: 2rem; }
.block-spacing-l-bottom    { margin-bottom: 3rem; }
.block-spacing-xl-bottom   { margin-bottom: 4rem; }
.block-spacing-xxl-bottom  { margin-bottom: 6rem; }

/*
 * Inner Padding (padding). These set CSS custom properties; a block's inner
 * wrapper consumes them as `padding-block: var(--ip-top, <block default>) ...`,
 * so an unset field leaves the block's own padding untouched (no regression) and
 * choosing a token overrides it. Applied to the block's inner element in render.
 */
.inner-padding-none-top    { --ip-top: 0; }
.inner-padding-s-top       { --ip-top: 2rem; }
.inner-padding-m-top       { --ip-top: 3rem; }
.inner-padding-l-top       { --ip-top: 4rem; }
.inner-padding-xl-top      { --ip-top: 6rem; }
.inner-padding-xxl-top     { --ip-top: 8rem; }
.inner-padding-none-bottom { --ip-bottom: 0; }
.inner-padding-s-bottom    { --ip-bottom: 2rem; }
.inner-padding-m-bottom    { --ip-bottom: 3rem; }
.inner-padding-l-bottom    { --ip-bottom: 4rem; }
.inner-padding-xl-bottom   { --ip-bottom: 6rem; }
.inner-padding-xxl-bottom  { --ip-bottom: 8rem; }