/***
 * Grid
 *
 * Our super simple custom grid system. Just include the mixin `gridContainer`
 * to set max-width = $max-width + $gutter. For internal stuff, use
 * `subgridContainer` to automatically offset the margins on the container if
 * needed, and `colspan` on the actual column.  By default, assumes 12 columns
 * and a 2 * $wr gutter, but those can be overridden for more complex layouts.
 * It spits out styles wherever it is called, so you can define different
 * columns or even entirely different grids within media queries.
 *
 * There's also a colpush mixin to shift an element to the right by a number of columns.
 *
 * Remember, variables wrapped in `[]` in the example are optional.
 *
 * scss:
 *   @include gridContainer ([$gutter]);
 *   @include subgridContainer ([$gutter]);
 *   @include colspan ($span[, $total[, $gutter]]);
 *   @include colpush ($span[, $total[, $gutter]]);
 *
 * @param {int} $span - number of columns to span
 * @param {int} $total - number of total columns the grid has
 * @param {number w/ unit} $gutter - width of the gutters between columns
 */
@mixin gridContainer ($gutter: $wr * 2) {
  @extend %clear-fix;
  @if $max-width != 100% {
    max-width: $max-width + $gutter;
  }
  margin-left: auto;
  margin-right: auto;
  // padding-left: $wr;
  // padding-right: $wr;
}
@mixin subgridContainer ($gutter: $wr * 2) {
  @extend %clear-fix;
  margin-left: -1 * $gutter / 2;
  margin-right: -1 * $gutter / 2;
}
@mixin colspan ($span, $total: 12, $gutter: $wr * 2) {
  box-sizing: border-box;
  float: left;
  min-height: 1px; // force it to take space no matter what
  @if ($gutter != 0) {
    width: calc(#{$span / $total *  100%} - #{$gutter});
  }
  @else {
    width: #{$span / $total *  100%};
  }
  margin-left: $gutter / 2;
  margin-right: $gutter / 2;
}
@mixin colpush ($span, $total: 12, $gutter: $wr * 2) {
  @if ($gutter != 0) {
    margin-left: calc(#{$span / $total *  100%} + #{$gutter / 2});
  }
  @else {
    margin-left: #{$span / $total *  100%};
  }
}