@mixin box-sizing {
  *, *:before, *:after { box-sizing: border-box }
}

@mixin clearfix {
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

@mixin row($nested: false) {
  display: flex;
  flex-wrap: wrap;

  @if $nested == true {
    margin-left: $col-gutter / -2;
    margin-right: $col-gutter / -2;
    max-width: none;
    width: auto;
  }

  @else {
    margin-left: auto;
    margin-right: auto;
    max-width: $row-width;
    width: 100%;

    @include clearfix();
  }
}

@mixin col($cols: false, $push: false, $pull: false, $offset: false) {
  @if $cols {
    width: percentage(($cols / $col-count));
  }
  
  @else if $push == false and $pull == false and $offset == false {
    margin: 0;
    padding-left: $col-gutter / 2;
    padding-right: $col-gutter / 2;
    width: 100%;
  }

  @if $push or $pull {
    position: relative;
  }

  @if $push {
    left: percentage(($push / $col-count));
    right: auto;
  }

  @if $pull {
    left: auto;
    right: percentage(($pull / $col-count));
  } 

  @if $offset { 
    margin-left: percentage(($offset / $col-count)) !important; 
  }
}

@mixin cols($mq) {
  @for $i from 1 through $col-count {
    .#{$mq}-#{$i} { @include col($cols: $i); }
  }
  
  @for $i from 0 through $col-count - 1 {
    .#{$mq}-push-#{$i} { @include col($push: $i); }
    .#{$mq}-pull-#{$i} { @include col($pull: $i); }
  }

  @for $i from 0 through $col-count - 1 {
    .#{$mq}-offset-#{$i} { @include col($offset: $i); }
  }
}