/* H3X Sliding Row — a horizontal strip whose children keep their intrinsic
 * width, never wrap, and scroll horizontally on overflow. Applied to both
 * the editor preview and the frontend so what you build matches what ships.
 *
 * Height modes:
 *   auto  — natural (content) height.
 *   fill  — grow to fill the remaining height of a flex-column parent (e.g.
 *           a Group holding a heading above the row). `flex: 1 1 0` uses a
 *           zero basis so the row never expands to fit tall children; the
 *           overflow-y:hidden below clips anything that doesn't conform.
 *   fixed — an explicit pixel height (via the --h3x-row-height custom prop).
 */

.h3x-sliding-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var( --h3x-row-gap, 0 );
}

/* Direct children size to their own content and stay clampable. Vertical
   margins are stripped so the flex row controls spacing via `gap`. */
.h3x-sliding-row > * {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.h3x-sliding-row.is-valign-top    { align-items: flex-start; }
.h3x-sliding-row.is-valign-center { align-items: center; }
.h3x-sliding-row.is-valign-bottom { align-items: flex-end; }

/* Fill the remaining height of a flex-column parent, capped to that space. */
.h3x-sliding-row.is-fill-height {
    flex: 1 1 0;
    min-height: 0;
}

.h3x-sliding-row.is-fixed-height {
    height: var( --h3x-row-height, auto );
}

/* ---- Height-passer helper -------------------------------------------------
 * Add `h3x-fill-col` to a container (e.g. a Group) that holds a heading above
 * a `is-fill-height` Sliding Row. It becomes a full-height flex column so the
 * row can claim the space left below the heading. Only the row grows — every
 * other child keeps its natural height and is never squeezed. */
.h3x-fill-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.h3x-fill-col > * {
    flex-shrink: 0;
}

.h3x-fill-col > .h3x-sliding-row.is-fill-height {
    flex: 1 1 0;
    min-height: 0;
}