////
///
/// Cluster
/// ===========================================================================
///
/// Flexible wrapping layout for groups of items.
/// 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-cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ss-f-cluster-gap, var(--ss-spacing-4));
        justify-content: var(--ss-f-cluster-justify, flex-start);
        align-items: var(--ss-f-cluster-align, center);
    }

    // Cluster variants
    .ss-f-cluster-xs {
        --ss-f-cluster-gap: var(--ss-spacing-1);
    }
    .ss-f-cluster-sm {
        --ss-f-cluster-gap: var(--ss-spacing-2);
    }
    .ss-f-cluster-md {
        --ss-f-cluster-gap: var(--ss-spacing-4);
    }
    .ss-f-cluster-lg {
        --ss-f-cluster-gap: var(--ss-spacing-6);
    }
    .ss-f-cluster-xl {
        --ss-f-cluster-gap: var(--ss-spacing-8);
    }

    // Alignment variants
    .ss-f-cluster-center {
        --ss-f-cluster-justify: center;
    }
    .ss-f-cluster-end {
        --ss-f-cluster-justify: flex-end;
    }
    .ss-f-cluster-between {
        --ss-f-cluster-justify: space-between;
    }
}