/* ============================================================================
   07-UTILITIES -> #GRID
   ========================================================================= */

//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Gap property utility classes
 */

@include generate-utility((
    'property':    'gap',
    'prefix':      'gap',
    'values':      $spacing,
    'responsive':  true,
));

@include generate-utility((
    'property':    'column-gap',
    'prefix':      'gap-x',
    'values':      $spacing,
    'responsive':  true,
));

@include generate-utility((
    'property':    'row-gap',
    'prefix':      'gap-y',
    'values':      $spacing,
    'responsive':  true,
));


/**
 * Grid template columns utility classes
 */

@each $breakpoint-name, $breakpoint-value in $breakpoints {
    @if ($breakpoint-name == 'xs') {
        @for $i from 1 through $grid-columns {
            .grid-cols-#{$i} {
                grid-template-columns: repeat(#{$i},minmax(0,1fr));
            }
        }
    } @else {
        @include media-breakpoint-up($breakpoint-name) {
            @for $i from 1 through $grid-columns {
                .#{$breakpoint-name}\:grid-cols-#{$i} {
                    grid-template-columns: repeat(#{$i},minmax(0,1fr));
                }                
            }
        }
    }
}


/**
 * Grid column span utility classes
 */

@each $breakpoint-name, $breakpoint-value in $breakpoints {
    @if ($breakpoint-name == 'xs') {
        @for $i from 1 through $grid-columns {
            .col-span-#{$i} {
                grid-column: span #{$i}/span #{$i};
            }
        }
    } @else {
        @include media-breakpoint-up($breakpoint-name) {
            @for $i from 1 through $grid-columns {
                .#{$breakpoint-name}\:col-span-#{$i} {
                    grid-column: span #{$i}/span #{$i};
                }                
            }
        }
    }
}


/**
 * Grid row span utility classes
 */

@each $breakpoint-name, $breakpoint-value in $breakpoints {
    @if ($breakpoint-name == 'xs') {
        @for $i from 1 through $grid-columns {
            .row-span-#{$i} {
                grid-row: span #{$i}/span #{$i};
            }
        }
    } @else {
        @include media-breakpoint-up($breakpoint-name) {
            @for $i from 1 through $grid-columns {
                .#{$breakpoint-name}\:row-span-#{$i} {
                    grid-row: span #{$i}/span #{$i};
                }                
            }
        }
    }
}