@use 'sass:math';

@mixin create-column-modifiers($modifier) {
    @for $i from 1 through 12 {
        &--#{$modifier}-#{$i} {
            grid-column: span $i;
        }
    }
}

@mixin create-grid-modifiers($modifier) {
    @each $breakpoint, $size in $rocket-breakpoints {
        @if $breakpoint == xs {
            &--#{$modifier} {
                @content;
            }
        } @else {
            @include breakpoint($breakpoint) {
                &--#{$breakpoint}--#{$modifier} {
                    @content;
                }
            }
        }
    }
}

.grid {
    --rocket-ui-grid-column-gap-value: calc(var(
        --rocket-ui-grid-column-gap, 36px
    ) / 2);
    --rocket-ui-grid-row-gap-value: var(
        --rocket-ui-grid-row-gap,
        #{$rocket-grid-row-gap}
    );

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
    row-gap: var(--rocket-ui-grid-row-gap-value);
    padding: 0;
    column-gap: var(--rocket-ui-grid-column-gap-value);
    list-style: none;

    @include breakpoint(md) {
        --rocket-ui-grid-column-gap-value: var(
            --rocket-ui-grid-column-gap,
            #{$rocket-grid-column-gap}
        );
    }

    &--h-center {
        justify-content: center;
    }

    &--v-center {
        align-items: center;
    }
}

.grid-column {
    grid-column: span 12;
    margin: 0;

    @each $breakpoint, $size in $rocket-breakpoints {
        @if $breakpoint == xs {
            @include create-column-modifiers($breakpoint);
        } @else {
            @include breakpoint($breakpoint) {
                @include create-column-modifiers($breakpoint);
            }
        }
    }
}