//                  d8b      888        888               d8b 888      888
//                  Y8P      888        888               Y8P 888      888
//                           888        888                   888      888
//  .d88b.  888d888 888  .d88888        88888b.  888  888 888 888  .d88888  .d88b.  888d888
// d88P"88b 888P"   888 d88" 888        888 "88b 888  888 888 888 d88" 888 d8P  Y8b 888P"
// 888  888 888     888 888  888 888888 888  888 888  888 888 888 888  888 88888888 888
// Y88b 888 888     888 Y88b 888        888 d88P Y88b 888 888 888 Y88b 888 Y8b.     888
//  "Y88888 888     888  "Y88888        88888P"   "Y88888 888 888  "Y88888  "Y8888  888
//      888
// Y8b d88P
//  "Y88P"

// Grid Builder
//
// ^^^scss
// @include build-grid()
// ^^^
//
// The `build-grid()` Sass mixin is a shortcut that generates our grid system. The mixin takes no parameters, but uses the `$breakpoints` defined in [Tokens ➔ Breakpoints](/tokens/breakpoints) and the `$grid-columns` defined in [Tokens ➔ Grid](/tokens/grid).
//
// Markup:
// Source
//
// Styleguide SassDirectives.GridBuilder
//
// Weight: 9
@mixin build-grid() {
  @each $breakpoint-name, $breakpoint-width in $breakpoints {
    .grid {
      @include breakpoint(#{$breakpoint-name}) {
        grid-template-columns: repeat($grid-columns, 1fr);

        @for $i from 1 through $grid-columns {
          .g-#{$breakpoint-name}-#{$i} {
            grid-area: span 1 / span $i;
          }
        }
      }
    }
  }
}