////
///
/// Columns
/// ===========================================================================
///
/// Multi-column text layout.
///
/// @group Layout
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@use "../01-core/external" as *;

@layer ss.layout {
    .ss-l-columns {
        column-count: var(--ss-column-count, 2);
        column-gap: var(--ss-column-gap, var(--ss-spacing-6));
    }

    // Column count variants
    .ss-l-columns-1 {
        --ss-column-count: 1;
    }
    .ss-l-columns-2 {
        --ss-column-count: 2;
    }
    .ss-l-columns-3 {
        --ss-column-count: 3;
    }
    .ss-l-columns-4 {
        --ss-column-count: 4;
    }

    // Auto columns based on width
    .ss-l-columns-auto {
        column-count: auto;
        column-width: var(--ss-column-width, q(288));
    }

    // Column rule (divider)
    .ss-l-columns-ruled {
        column-rule: var(--ss-a-border-width) solid var(--ss-color-border);
    }

    // Prevent break inside
    .ss-l-column-break-avoid {
        break-inside: avoid;
    }

    .ss-l-column-span-all {
        column-span: all;
    }
}