@mixin make-gutters($gutter: $grid-gutter-width) {
  padding-right: ($gutter / 2);
  padding-left: ($gutter / 2);
}

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage-round($size / $columns, 2);
  max-width: percentage-round($size / $columns, 2); // for browser compatibility.
}

@mixin make-col-offset($size, $columns: $grid-columns) {
  margin-left: percentage-round($size / $columns, 2);
}

@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
  // Common properties for all breakpoints
  %column-common {
    @include make-gutters();
    position: relative;
    width: 100%;
    min-height: 1px; // Prevent columns from collapsing when empty
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint);

    // common-values.
    @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
        @extend %column-common;
      }
    }

    .col#{$infix},
    .col#{$infix}-auto {
      @extend %column-common;
    }

    // media-query
    @include media-breakpoint-up($breakpoint) {
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }

      .col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
      }

      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          @include make-col($i, $columns);
        }
      }

      .order#{$infix}-first { order: -1; }
      .order#{$infix}-last { order: $columns + 1; }

      @for $i from 0 through $columns {
        .order#{$infix}-#{$i} { order: $i; }
      }

      // `$columns - 1` because offsetting by the width of an entire row isn't possible
      @for $i from 0 through ($columns - 1) {
        @if not ($infix == '' and $i == 0) { // Avoid emitting useless .offset-0
          .offset#{$infix}-#{$i} {
            @include make-col-offset($i, $columns);
          }
        }
      }
    }
  }
}

// container
.container {
  width: calc(100% - 1rem);
  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;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

// columns
@include make-grid-columns();