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

// Mixin for Semantic Grid reponsiveness

  @mixin respondTo($media) {
    @if $media == smallScreen {
      @media only screen and (max-width: $screenSmall - 1) { @content; }
    } @else if $media == mediumScreen {
      @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) { @content; }
    } @else if $media == largeScreen {
      @media only screen and (min-width: $screenXlarge) { @content; }
    }
  }

// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/

  @mixin clearfix() { *zoom:1;
    &:before, &:after { content: ""; display: table; }
    &:after { clear: both; }
  }
  @mixin mobileClearfix() {
    @include respondTo(smallScreen) { &:before, &:after { content: ""; display: table; }
      &:after { clear: both; }
      &:last-child { float: none; }
    }
  }

  // Outer row mixin for container rows

  @mixin outerRow() { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto; @include clearfix(); @include respondTo(smallScreen) { width: auto; min-width: 0; margin-left: 0; margin-right: 0; } }

  // 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 innerRow($behavior: false) {
    @if $behavior == collapse { width: auto; max-width: none; min-width: 0; margin: 0; @include clearfix();
    } @else { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2)); @include 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 column($columns:$columns, $behavior: false) {
    @if $behavior == center { float: none; margin: 0 auto; position: relative; min-height: 1px; padding: 0 ($columnGutter/2); width: gridCalc($columns, $totalColumns); @include respondTo(smallScreen) { width: auto !important; float: none; } @include mobileClearfix();
    } @else if $behavior == collapse { float: left; position: relative; min-height: 1px; padding: 0; width: gridCalc($columns, $totalColumns); @include respondTo(smallScreen) { width: auto !important; float: none; } @include mobileClearfix();
    } @else { float: left; position: relative; min-height: 1px; padding: 0 ($columnGutter/2); width: gridCalc($columns, $totalColumns); @include respondTo(smallScreen) { width: auto !important; float: none; } @include mobileClearfix(); }
  }

  // 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) { @include respondTo(smallScreen) { width: gridCalc($columns, $mobileTotalColumns); float: left; 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); } }