/*
 * Magekit_CmsEngine — Columns gap.
 *
 * Loaded on both the storefront and the admin PageBuilder stage so the editor
 * sees what the storefront renders. Shared from view/base so both areas resolve
 * the same file.
 *
 * The gap value is set as the `--magekit-column-gap` custom property on the
 * column-group (by the column-gap style converter) and cascades to the inner
 * flex row. Preset sizes resolve to the tokens below; brands override these
 * variables in their theme to re-scale the spacing without touching this module.
 */
:root {
    --magekit-column-gap-xs: 0.5rem;
    --magekit-column-gap-sm: 0.75rem;
    --magekit-column-gap-md: 1.5rem;
    --magekit-column-gap-lg: 2.5rem;
    --magekit-column-gap-xl: 4rem;
}

/*
 * Apply the gap to the flex row that holds the columns. The flex container
 * differs by context:
 *   - storefront / saved markup: `.pagebuilder-column-line` (columns are its
 *     direct children), and older content uses `.pagebuilder-column-group`;
 *   - admin stage: `.pagebuilder-column-line > .element-children`.
 * The `--magekit-column-gap` custom property is set on the group and inherits to
 * all of them. Columns are `flex-shrink: 1`, so they shrink to absorb the gap
 * and never overflow the row.
 */
.pagebuilder-column-line,
.pagebuilder-column-line > .element-children,
.pagebuilder-column-group {
    gap: var(--magekit-column-gap, 0px);
}