////
///
/// Grid
/// ===========================================================================
///
/// CSS Grid layout system.
///
/// @group Layout
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

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

@layer ss.layout {
    .ss-l-grid {
        display: grid;
        gap: var(--ss-l-grid-gap, var(--ss-spacing-4));
    }

    // Auto-fit grid (responsive columns)
    .ss-l-grid-auto {
        grid-template-columns: repeat(
            auto-fit,
            minmax(var(--ss-l-grid-min, q(250)), 1fr)
        );
    }

    // Fixed column grids
    .ss-l-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .ss-l-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .ss-l-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .ss-l-grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .ss-l-grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .ss-l-grid-12 {
        grid-template-columns: repeat(12, 1fr);
    }

    // Gap variants
    .ss-l-grid-gap-0 {
        --ss-l-grid-gap: 0;
    }
    .ss-l-grid-gap-xs {
        --ss-l-grid-gap: var(--ss-spacing-1);
    }
    .ss-l-grid-gap-sm {
        --ss-l-grid-gap: var(--ss-spacing-2);
    }
    .ss-l-grid-gap-md {
        --ss-l-grid-gap: var(--ss-spacing-4);
    }
    .ss-l-grid-gap-lg {
        --ss-l-grid-gap: var(--ss-spacing-6);
    }
    .ss-l-grid-gap-xl {
        --ss-l-grid-gap: var(--ss-spacing-8);
    }

    // Fixed column counts give way on small screens: 3 to 6 columns become
    // two below `md`, and every fixed grid becomes one column below `sm`.
    @include breakpoint-down("md") {
        .ss-l-grid-3,
        .ss-l-grid-4,
        .ss-l-grid-5,
        .ss-l-grid-6 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @include breakpoint-down("sm") {
        .ss-l-grid-2,
        .ss-l-grid-3,
        .ss-l-grid-4,
        .ss-l-grid-5,
        .ss-l-grid-6 {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}