.grid {
  display: flex;
  flex-wrap: wrap;

  @supports (display: grid) {
    display: grid;
  }
}

/* Space between grid cells, use on grid container. */
@each $gap-name, $gap-value in $grid-gaps {
  $i: index($grid-gaps, $gap-name $gap-value);

  .gap-#{$gap-name} {
    > * {
      padding: rem($gap-value * 0.5);
    }

    @supports (display: grid) {
      > * {
        padding: 0;
      }
      grid-gap: rem($gap-value);
      gap: rem($gap-value); // newer, renamed property not available in all browsers yet.
    }
  }
}

@each $breakpoint-name, $breakpoint-value in $breakpoints {
  @media #{$breakpoint-value} {
    .#{$breakpoint-name}--grid {
      display: flex;
      flex-wrap: wrap;

      @supports (display: grid) {
        display: grid;
      }
    }

    @each $gap-name, $gap-value in $grid-gaps {
      $i: index($grid-gaps, $gap-name $gap-value);

      .#{$breakpoint-name}--gap-#{$gap-name} {
        > * {
          padding: rem($gap-value * 0.5);
        }

        @supports (display: grid) {
          > * {
            padding: 0;
          }
          grid-gap: rem($gap-value);
          gap: rem($gap-value); // newer, renamed property not available in all browsers yet.
        }
      }
    }
  }
}

/* Sets up a 12 column grid with equal width columns. Use on grid container. */
.g-cols {
  grid-template-columns: repeat($columns, 1fr);
}

/* Number of columns or rows to span. Use on children of .g-cols. */
@for $i from 1 through $columns {
  .g-col-#{$i} {
    width: $i / 12 * 100%;

    @supports (display: grid) {
      width: auto;
      grid-column-end: span $i;
    }
  }

  /* Only create 4 row classes for now */
  @if $i < 5 {
    .g-row-#{$i} {
      grid-row-end: span $i;
    }
  }

  @if $i < $columns {
    // the `g-push` class is being renamed to `g-start` for clarity.
    // once the stylesheet is live, class names in Statamic can
    // be updated from `g-push-` to `g-start-`.
    //
    // After Statamic has been updated, we can refactor or
    // remove the `g-push` class
    //
    .g-push-#{$i} {
      grid-column-start: $i + 1;
    }

    .g-start-#{$i} {
      grid-column-start: $i + 1;
    }
  }
}

.g-push-0,
.g-start-0 {
  grid-column-start: 0;
}

.g-push-auto,
.g-start-auto {
  grid-column-start: auto;
}

@each $breakpoint-name, $breakpoint-value in $breakpoints {
  @media #{$breakpoint-value} {
    .#{$breakpoint-name}--g-cols {
      grid-template-columns: repeat($columns, 1fr);
    }

    @for $i from 1 through $columns {
      .#{$breakpoint-name}--g-col-#{$i} {
        width: $i / 12 * 100%;

        @supports (display: grid) {
          width: auto;
          grid-column-end: span $i;
        }
      }

      @if $i < 5 {
        .#{$breakpoint-name}--g-row-#{$i} {
          grid-row-end: span $i;
        }
      }

      @if $i < $columns {
        .#{$breakpoint-name}--g-push-#{$i} {
          grid-column-start: $i + 1;
        }

        .#{$breakpoint-name}--g-start-#{$i} {
          grid-column-start: $i + 1;
        }
      }
    }

    .#{$breakpoint-name}--g-push-0 {
      grid-column-start: 0;
    }

    .#{$breakpoint-name}--g-start-0 {
      grid-column-start: 0;
    }

    .#{$breakpoint-name}--g-push-auto {
      grid-column-start: auto;
    }

    .#{$breakpoint-name}--g-start-auto {
      grid-column-start: auto;
    }
  }
}

/* Auto-fit columns, use on grid container. Children will automatically inherit responsive behavior.
 * If no grid support, auto columns will be 100% width and stacked. */
@each $basis-name, $basis-value in $columns-basis {
  .g-cols-auto-#{$basis-name} {
    grid-template-columns: repeat(auto-fit, minmax(rem($basis-value), 1fr));
  }
}