@use "sass:map";
@use "sass:math";
@use "mixins" as *;
@use "variables" as *;

// Container
.container {
    width: 100%;
    padding-right: calc($grid-gutter-width / 2);
    padding-left: calc($grid-gutter-width / 2);
    margin-right: auto;
    margin-left: auto;

    @each $breakpoint, $max-width in $container-max-widths {
        @include media-breakpoint-up($breakpoint) {
            max-width: $max-width;
        }
    }
}

// Row
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * $grid-gutter-width / 2);
    margin-left: calc(-1 * $grid-gutter-width / 2);
}

// Column spacing
[class*="col-"] {
    padding-right: calc($grid-gutter-width / 2);
    padding-left: calc($grid-gutter-width / 2);
}

.row > *{
    padding-right: calc($grid-gutter-width / 2);
    padding-left: calc($grid-gutter-width / 2);
}

// Auto column
.col {
    flex: 1 0 0%;
}

// Generate .col-{i} (1–12)
@for $i from 1 through $grid-columns {
    .col-#{$i} {
        flex: 0 0 auto;
        width: #{math.div($i, $grid-columns) * 100%};
    }
}

// Offset columns: .offset-{i} (1–12)
@for $i from 1 through $grid-columns {
    .offset-#{$i} {
        margin-left: #{math.div($i, $grid-columns) * 100%};
    }
}

// Responsive offsets: .offset-sm-*, .offset-md-*, etc.
@each $breakpoint, $min in $grid-breakpoints {
    @if $min != 0 {
        @include media-breakpoint-up($breakpoint) {
            @for $i from 1 through $grid-columns {
                .offset-#{$breakpoint}-#{$i} {
                    margin-left: #{math.div($i, $grid-columns) * 100%};
                }
            }
        }
    }
}

// Responsive columns: .col-sm-*, .col-md-*, etc.
@each $breakpoint, $min in $grid-breakpoints {
    @if $min != 0 {
        @include media-breakpoint-up($breakpoint) {
            @for $i from 1 through $grid-columns {
                .col-#{$breakpoint}-#{$i} {
                    flex: 0 0 auto;
                    width: #{math.div($i, $grid-columns) * 100%};
                }
            }
        }
    }
}

// Grid spacing utilities (e\.g\., gy-1 to gy-5)
@for $i from 0 through 5 {
    .gy-#{$i} {
        --bs-gutter-y: #{$i * 0.25}rem;
        row-gap: var(--bs-gutter-y);
    }
}

@for $i from 0 through 5 {
    .order-#{$i} {
        order: $i;
    }
}
.order-first {
    order: -1;
}
.order-last {
    order: 6;
}
@each $breakpoint, $min in $grid-breakpoints {
    @if $min != 0 {
        @include media-breakpoint-up($breakpoint) {
            @for $i from 0 through 5 {
                .order-#{$breakpoint}-#{$i} {
                    order: $i;
                }
            }
            .order-#{$breakpoint}-first {
                order: -1;
            }
            .order-#{$breakpoint}-last {
                order: 6;
            }
        }
    }
}
