// Inspired by https://github.com/twigkit/semantic.gs/blob/master/stylesheets/scss/grid.scss

  // Outer row mixin for container rows

  @mixin outerRow() { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto; @extend %clearfix; }

  // Inner row mixin for nested rows, must be a child of an outer-row element. $behavior can be 'collapse' to get rid of margins

  @mixin innerRowBase { width: auto; max-width: none; min-width: 0; }
  @mixin innerRow($behavior: false) {
      @if $behavior == collapse { @extend %row-i-base; margin: 0; @extend %clearfix;
    } @else                     { @extend %row-i-base; margin: 0 (-($columnGutter/2)); @extend %clearfix; }
  }

  // Columns mixin, syntax is ($columns, $behavior). Behavior can be 'centered' which centers things or 'collapse' which collapses the gutters. ex @include row(4,[center | collapse])

  @mixin columnBase { position: relative; min-height: 1px; padding: 0 ($columnGutter/2); }
  @mixin column($columns:$columns, $behavior: false) {
      @if      $behavior == center   { @extend %fl-n; margin: 0 auto !important; @extend %c-base; width: gridCalc($columns, $totalColumns);
    } @else if $behavior == collapse { @extend %fl-l; @extend %c-base; padding: 0; width: gridCalc($columns, $totalColumns);
    } @else                          { @extend %fl-l; @extend %c-base; width: gridCalc($columns, $totalColumns); }
  }

  // Offset Mixin, include after a column mixin to manipulate its grid offset.

  @mixin offsetBy($offset:1) { margin-left: gridCalc($offset, $totalColumns); }

  // Push/Pull Mixins, include after a column mixin to manipulate stack ordering.

  @mixin push($push:1) { left: gridCalc($push, $totalColumns); }
  @mixin pull($push:1) { right: gridCalc($push, $totalColumns); }

  // Mobile Row, synctax is @include mobile-row();

  @mixin mobileRow() { @include respondTo(smallScreen) { width: auto; min-width: 0; margin-left: 0; margin-right: 0; @include clearfix(); } }

  // Mobile Columns, syntax is @include mobile-column(#);

  @mixin mobileColumn($columns:$columns, $behavior: false) {
      @if      $behavior == center   { @include respondTo(smallScreen) { float: none; margin: 0 auto; position: relative; min-height: 1px; padding: 0 ($columnGutter/2); width: gridCalc($columns, $mobileTotalColumns); }
    } @else if $behavior == collapse { @include respondTo(smallScreen) { float: left; position: relative; min-height: 1px; padding: 0; width: gridCalc($columns, $mobileTotalColumns); }
    } @else                          { @include respondTo(smallScreen) { float: left; width: gridCalc($columns, $mobileTotalColumns); padding: 0 ($columnGutter/2); } }
  }

  // Mobile Push/Pull Mixin

  @mixin mobilePush($push:1) { @include respondTo(smallScreen) { left: gridCalc($push, $mobileTotalColumns); } }
  @mixin mobilePull($push:1) { @include respondTo(smallScreen) { right: gridCalc($push, $mobileTotalColumns); } }

  // Invisible Placeholder Classes for Grid
  %fl-l { float: left; }
  %fl-r { float: right; }
  %fl-n { float: none; }

  %clearfix { @include clearfix(); }
  %clearfix-m { @include mobileClearfix(); }

  %row-o { @include outerRow(); }
  %row-i-base { @include innerRowBase(); }
  %row-i { @include innerRow(); }

  %c-base { @include columnBase(); }

  @for $i from 1 through $totalColumns {
    %c-#{$i} { @include column($i); }
  }