////
///
/// Stack
/// ===========================================================================
///
/// Vertical stacking layout primitive.
/// Pure spatial logic. No colors. No shadows.
///
/// @group Flow
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@layer ss.flow {
    // The gap is declared and used on the stack itself (flex `gap`), so a
    // stack nested in another keeps its own spacing inside and the parent's
    // spacing outside. A `margin` on `> * + *` read the child's variable, so
    // a nested `-xs` stack also shrank the gap above it.
    .ss-f-stack {
        --ss-f-stack-gap: var(--ss-vspace-md);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--ss-f-stack-gap);
    }

    .ss-f-stack > * {
        margin-block: 0;
    }

    // Stack variants with predefined gaps
    .ss-f-stack-xs {
        --ss-f-stack-gap: var(--ss-vspace-xs);
    }
    .ss-f-stack-sm {
        --ss-f-stack-gap: var(--ss-vspace-sm);
    }
    .ss-f-stack-md {
        --ss-f-stack-gap: var(--ss-vspace-md);
    }
    .ss-f-stack-lg {
        --ss-f-stack-gap: var(--ss-vspace-lg);
    }
    .ss-f-stack-xl {
        --ss-f-stack-gap: var(--ss-vspace-xl);
    }
}