// Generates gap classes
@mixin make-gaps() {
  $gaps: 0 0, 1 0.125, 2 0.25, 3 0.5, 4 0.75, 5 1, 6 1.5, 7 2, 8 3, 9 4;
  @each $name, $size in $gaps {
    .gap-#{$name} {
      gap: #{$size}rem;
    }
    .gap-x-#{$name} {
      column-gap: #{$size}rem;
    }
    .gap-y-#{$name} {
      row-gap: #{$size}rem;
    }
  }
}

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

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

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

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

@mixin make-columns() {
  @for $i from 1 through 13 {
    @if $i < 13 {
      .col-span-#{$i} {
        grid-column: span #{$i} / span #{$i};
      }
    }
    .col-start-#{$i} {
      grid-column-start: #{$i};
    }
    .col-end-#{$i} {
      grid-column-end: #{$i};
    }
  }

  .col-auto {
    grid-row: auto;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .col-start-auto {
    grid-column-start: auto;
  }
  .col-end-auto {
    grid-column-end: auto;
  }
}

@mixin make-rows() {
  @for $i from 1 through 7 {
    @if $i < 7 {
      .row-span-#{$i} {
        grid-row: span #{$i} / span #{$i};
      }
    }
    .row-start-#{$i} {
      grid-row-start: #{$i};
    }
    .row-end-#{$i} {
      grid-row-end: #{$i};
    }
  }

  .row-auto {
    grid-row: auto;
  }
  .row-span-full {
    grid-row: 1 / -1;
  }
  .row-start-auto {
    grid-row-start: auto;
  }
  .row-end-auto {
    grid-row-end: auto;
  }
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Grid classes
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

@include make-gaps();
@include make-template-columns();
@include make-template-rows();
@include make-columns();
@include make-rows();

.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);
}

.auto-rows-auto {
  grid-auto-rows: auto;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.auto-rows-max {
  grid-auto-rows: max-content;
}
.auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}