/* ===== Stack Layout Primitive ===== */

.ui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, 16px);
    align-items: var(--stack-align, stretch);
    justify-content: var(--stack-justify, flex-start);
}

@media (min-width: 768px) {
    .ui-stack {
        gap: var(--stack-gap-md, var(--stack-gap, 16px));
    }
}

@media (min-width: 1024px) {
    .ui-stack {
        gap: var(--stack-gap-lg, var(--stack-gap-md, var(--stack-gap, 16px)));
    }
}

/* Padding modifier (additive — only applies when Stack.Padding / PaddingBlock /
   PaddingBlockEnd is set, which sets the CSS variable inline). */
.ui-stack[style*="--stack-padding"] {
    padding-top: var(--stack-padding-block, 0);
    padding-bottom: var(--stack-padding-block-end, var(--stack-padding-block, 0));
    padding-left: var(--stack-padding, 0);
    padding-right: var(--stack-padding, 0);
    box-sizing: border-box;
}

/* Fill modifier — Stack fills the remaining main-axis space of its flex parent.
   Pairs with `min-height: 0` so flex sizing can shrink the Stack below content
   size when needed (e.g. scroll containment). No effect outside a flex parent. */
.ui-stack--fill {
    flex: 1 1 0;
    min-height: 0;
}

/* FillBlock modifier — Stack fills its non-flex parent via block-axis sizing.
   Use in absolute-positioned or block layouts where Fill (flex-based) doesn't apply. */
.ui-stack--fill-block {
    width: 100%;
    height: 100%;
}

/* NoShrink modifier — Stack doesn't shrink below its content/explicit size
   inside a flex parent. Default flex behavior allows shrinking. */
.ui-stack--no-shrink {
    flex-shrink: 0;
}

/* Scrollable modifier — Stack scrolls its own overflow rather than overflowing
   its parent.  Pages express scroll containment through this contract instead
   of reaching into the primitive with page-local `flex:` / `overflow:` rules. */
.ui-stack--scroll-vertical {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.ui-stack--scroll-horizontal {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
}

.ui-stack--scroll-both {
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}