// Grid Mixins
// @mixin row   - Grid row
// @mixin col   - Grid column
// @mixin push  - Push a grid column
// @mixin pull  - Pull a grid column
// @mixin mq  - Grid breakpoints

// clearfix
%clearfix {
    *zoom: 1;
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

// border-box
%border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
}

// grid row mixin
@mixin row($inside: false) {
  @extend %clearfix;
  @if($inside == true) {
    margin-left: -$gutter/2;
    margin-right: -$gutter/2;
  }
  @else {
    max-width: $wrapper;
    margin-left: auto;
    margin-right: auto;
  }
  > div, nav, section {
    @extend %border-box;
  }
}

// grid column mixin
@mixin col($width: 1, $padding: true) {
  float: left;
  width: percentage($width);
  @if($padding == true) {
    padding-left: $gutter/2;
    padding-right: $gutter/2;
  }
}

// push grid column mixin
@mixin push($width: 0) {
  position: relative;
  left: percentage($width);
}

// pull grid column mixin
@mixin pull($width: 0) {
  position: relative;
  right: percentage($width);
}

// automatted grid
@mixin grid($cols) {
  // grid row
  .row {
    @include row;
      .row {

      }
  }
  // full width column
  .col-1 {
    @include col;
  }
  // automagic grid
  @for $i from 1 through $cols {
    @for $i2 from 1 through $cols {
      @if $i2 < $i {
        .col-#{$i2}-#{$i} {
          @include col;
        }
        @include mq($mq-md) {
          .col-#{$i2}-#{$i} {
            @include col($i2/$i);
          }
          .push-#{$i2}-#{$i} {
            @include push($i2/$i);
          }
          .pull-#{$i2}-#{$i} {
            @include pull($i2/$i);
          }
        }
      }
    }
  }
}
