// ---
// title: Grids
// description: Fluid and nestable grid system with responsive option.
// ---

// ### Responsive
// To include a responsive grid in your Sass...

//     .mygrid {
//       @include grid($responsive: 500px);
//     }

// This will cause the grid to stack vertically when the browser window is less than 500px.

// ### Basic Grid
// A gutter is set by default.

// <div class="example html">
//   <div class="grid">
//     <div class="grid__cell">
//       <div class="doc-placeholder">even width cells</div>
//     </div>
//     <div class="grid__cell">
//       <div class="doc-placeholder">even width cells</div>
//     </div>
//     <div class="grid__cell">
//       <div class="doc-placeholder">even width cells</div>
//     </div>
//   </div>
// </div>

// <div class="example html">
//   <div class="grid grid--gutter--narrow">
//     <div class="grid__cell">
//       <div class="doc-placeholder">even width cells</div>
//     </div>
//     <div class="grid__cell">
//       <div class="doc-placeholder">even width cells</div>
//     </div>
//     <div class="grid__cell">
//       <div class="doc-placeholder">even width cells</div>
//     </div>
//   </div>
// </div>

// <div class="example html">
//   <div class="grid grid--gutter--wide">
//     <div class="grid__cell">
//       <div class="doc-placeholder">even width cells</div>
//     </div>
//     <div class="grid__cell">
//       <div class="doc-placeholder">even width cells</div>
//     </div>
//     <div class="grid__cell">
//       <div class="doc-placeholder">even width cells</div>
//     </div>
//   </div>
// </div>

// ### Grid Flush

// <div class="example html">
//   <div class="grid grid--flush">
//     <div class="grid__cell">
//       <div class="doc-placeholder">even width cells</div>
//     </div>
//     <div class="grid__cell">
//       <div class="doc-placeholder">even width cells</div>
//     </div>
//     <div class="grid__cell">
//       <div class="doc-placeholder">even width cells</div>
//     </div>
//   </div>
// </div>

// ### Different Widths

// <div class="example html">
//   <div class="grid">
//     <div class="grid__cell width-3-5">
//       <div class="doc-placeholder">3/5</div>
//     </div>
//     <div class="grid__cell width-1-5">
//       <div class="doc-placeholder">1/5</div>
//     </div>
//     <div class="grid__cell width-1-5">
//       <div class="doc-placeholder">1/5</div>
//     </div>
//   </div>
// </div>

// [---]

@mixin grid($responsive: null) {
  @include display(flex);
  @include flex-wrap(wrap);
  margin-left: -(spacer(2));

  &__cell {
    @include flex(1);
    padding-left: spacer(2);
  }

  &--gutter--narrow {
    margin-left: -(spacer(1));

    > .#{$namespace}grid__cell {
      padding-left: spacer(1);
    }
  }

  &--gutter--wide {
    margin-left: -(spacer(4));

    > .#{$namespace}grid__cell {
      padding-left: spacer(4);
    }
  }

  &--flush {
    margin-left: 0;

    > .#{$namespace}grid__cell {
      padding-left: 0;
    }
  }

  // Grid cells only grow as large as the content.
  &--natural {
    > .#{$namespace}grid__cell {
      @include flex(none);
    }
  }

  @if ($responsive) {
    @include breakpoint($max: $responsive) {
      display: block;
      margin-left: 0;

      &__cell {
        @include flex(none);
        padding-left: 0 !important;
        margin-bottom: spacer(2);
      }

      &--gutter--wide,
      &--gutter--narrow {
        margin-left: 0;
      }
    }
  }

  // ## Grid Alignment
  // Moves grid cells to align center or anchored at the bottom of the grid.

  &--center {
    @include align-items(center);
  }

  &--bottom {
    @include align-items(flex-end);
  }

  // ## Grid Widths

  // If a width is specificed on a cell__grid then have to disable the
  // default `flex` value otherwise it won't obey the width.

  // [c]
  //   <div class="grid__cell width-1-3">grid cell</div>
  // [/c]

  &__cell[class*="width-"] {
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
  }
}

%#{$namespace}grid,
.#{$namespace}grid {
  @include grid;
}