@import 'bootstrap/custom-bootstrap-variables';
@import 'bootstrap/scss/mixins/breakpoints';


//$separator: \:;
$separator: '-';

.d-grid {
    display: grid;
}

.grid-flow-row	{ grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-row-dense { grid-auto-flow: row dense; }
.grid-flow-col-dense { grid-auto-flow: column dense; }
.auto-cols-auto	{ grid-auto-columns: auto; }
.auto-cols-min { grid-auto-columns: min-content; }
.auto-cols-max { grid-auto-columns: max-content; }
.auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }

.grid-cols-none { grid-template-columns: none; }
.grid-rows-none	{ grid-template-rows: none; }

@for $i from 1 through 12 {
    .grid-cols-#{$i} {
        grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
    }

    .grid-rows-#{$i} {
        grid-template-rows: repeat(#{$i}, minmax(0, 1fr));;
    }

    .row-span-#{$i} {
        grid-row: span #{$i} / span #{$i};
    }

    .row-start-#{$i} {
        grid-row-start: #{$i};
    }

    .col-span-#{$i} {
        grid-column: span #{$i} / span #{$i};
    }

    .col-start-#{$i} {
        grid-column-start: #{$i};
    }

    .gap-#{$i} {
        grid-gap: calc(#{($spacer / 2) * $i});
    }

    .gap-x-#{$i} {
        column-gap: calc(#{($spacer / 2) * $i});
    }

    .gap-y-#{$i} {
        row-gap: calc(#{($spacer / 2) * $i});
    }
}

@each $breakpoint, $v in $grid-breakpoints {
    .#{$breakpoint}\:grid,
    .d-#{$breakpoint}-grid {

        @include media-breakpoint-up(#{$breakpoint}) {
            display: grid;
        }
    }


    @include media-breakpoint-up(#{$breakpoint}) {
        @for $i from 1 through 12 {
            .#{$breakpoint}#{$separator}grid-cols-#{$i} {
                grid-template-columns: repeat(#{$i}, 1fr);
            }

            .#{$breakpoint}#{$separator}row-span-#{$i} {
                grid-row: span #{$i} / span #{$i};
            }

            .#{$breakpoint}#{$separator}row-start-#{$i} {
                grid-row-start: #{$i};
            }

            .#{$breakpoint}#{$separator}col-span-#{$i} {
                grid-column: span #{$i} / span #{$i};
            }

            .#{$breakpoint}#{$separator}col-start-#{$i} {
                grid-column-start: #{$i};
            }

            .#{$breakpoint}#{$separator}gap-#{$i} {
                grid-gap: calc(#{($spacer / 2) * $i});
            }

            .#{$breakpoint}#{$separator}gap-x-#{$i} {
                column-gap: calc(#{($spacer / 2) * $i});
            }

            .#{$breakpoint}#{$separator}gap-y-#{$i} {
                row-gap: calc(#{($spacer / 2) * $i});
            }
        }
    }
}