// RIVER Design-System: Helpers - Grid Cols //

// A Grid helper for displaying grid columns, built using 'display: grid'.
// The parent class of '.grid-cols' defines the grid, with optional child columns of '.grid-col'.
// Variations: 'inline'
// Variations for child .grid-col: 'auto', 'start-auto', 'end-auto', 'full'
// Variations for child .grid-span: #1-13 (number of grid columns to span)

// With grid-cols, we define the default number of columns on the grid parent itself.

// Example usage:
// <div class="grid-cols grid-cols--2 md:grid-cols--4">...</div>

@if(design-setting('helpers') and design-setting('helpers.grid-cols', false)) {
    /* RIVER Design-System: Helpers - Grid Cols */

    // Grid Cols Class (parent)
    .grid-cols {
        display: grid;
        @if(design-setting('grid-cols.gap-variable')) {
            gap: design-variable(design-setting('grid-cols.gap-variable')...);
        }
    }

    // Grid Col Class (child)
    .grid-col {
        //
    }

    // Grid Cols Class (parent) - Variations
    @if(design-setting('grid-cols.variations')) {
        .grid-cols--inline {
            display: inline-grid;
        }
    }

    // Responsive
    @include design-breakpoints-query-up() using ($variation, $breakpoint) {
        $variation: design-transform-class-name($variation);

        // Standard Grids
        // eg, .grid-cols--2, .md:grid-cols--4, etc
        @for $i from 1 through design-setting('grid-cols.count') {
            .#{$variation}grid-cols--#{$i} {
                grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
            }
        }
        
        // Column Helpers
        // eg, .grid-col--auto, .md:grid-col--full, etc
        @if(design-setting('grid-cols.col-helpers')) {
            .#{$variation}grid-col--auto {
                grid-column: auto;
            }
            .#{$variation}grid-col--start-auto {
                grid-column-start: auto;
            }
            .#{$variation}grid-col--end-auto {
                grid-end-start: auto;
            }
            .#{$variation}grid-col--full {
                grid-column: 1 / -1;
            }
        }

        // Column Span Helpers
        // eg, .grid-span--1, .grid-start--4, .md:grid-end--6, etc
        @if(design-setting('grid-cols.span-helpers')) {
            // Column Span, Start, End
            @for $i from 1 through (design-setting('grid-cols.count') + 1) {
                .#{$variation}grid-span--#{$i} {
                    grid-column: span #{$i} / span #{$i};
                }
                .#{$variation}grid-start--#{$i} {
                    grid-column-start: #{$i};
                }
                .#{$variation}grid-end--#{$i} {
                    grid-column-end: #{$i};
                }
            }
        }

    }

}