////
///
/// Inline
/// ===========================================================================
///
/// Inline/horizontal 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 {
    .ss-f-inline {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ss-f-inline-gap, var(--ss-spacing-4));
        align-items: var(--ss-f-inline-align, baseline);
    }

    // Inline variants
    .ss-f-inline-xs {
        --ss-f-inline-gap: var(--ss-spacing-1);
    }
    .ss-f-inline-sm {
        --ss-f-inline-gap: var(--ss-spacing-2);
    }
    .ss-f-inline-md {
        --ss-f-inline-gap: var(--ss-spacing-4);
    }
    .ss-f-inline-lg {
        --ss-f-inline-gap: var(--ss-spacing-6);
    }

    // Alignment
    .ss-f-inline-center {
        align-items: center;
    }
    .ss-f-inline-stretch {
        align-items: stretch;
    }
}