// Loosely based on 960.gs //
// The Bearded Grid System: https://github.com/elefontpress/rwd-grid-example
// Gemified version: https://rubygems.org/gems/bearded_grid | https://github.com/beardedstudio/bearded_grid

$gutter_width: 3.5%;
$columns: 12;
$column_width: 5.125%;
$grid_width: ((($column_width+($gutter_width))*$columns)-$gutter_width);

// A 16-column version of the grid:

// $gutter_width: 4%;
// $columns: 16;
// $column_width: 2.5%;
// $grid_width: ((($column_width+($gutter_width))*$columns)-$gutter_width);

@mixin container($max-width: 81.25em) {
  width: 95%;
  margin: auto;
  max-width: $max-width;
  *zoom: 1;

  @include breakpoint($breakpoint-s) {
    width: 85%;
  }

  @include breakpoint($breakpoint-l) {
    width: 95%;
  }

  @if $legacy-support-for-ie8 {
    // give IE8 a fixed-width!
    max-width: 75em;
    width: 75em;
  }
}

@function column_width($num) {
  @return ($num * $column_width) + (($num - 1) * ($gutter_width));
}

@mixin column($num) {
  display: inline;
  float: left;
  width: column_width($num);
  margin-right: $gutter_width;
  margin-left: 0;
}

@mixin reset-column {
  display: initial;
  margin-right: 0;
  float: none;
  width: auto;
}

@mixin prepend($num) {
  margin-left: column_width($num) + ($gutter_width * 2);
}

@mixin append($num) {
  margin-right: column_width($num) + ($gutter_width * 2);
}

@mixin last {
  margin-right: 0;
}

@mixin last-col2 {
  margin-right: $gutter-width;
  .lt-ie8 & {
    margin-right: $gutter_width - 0.25%;
  }
  float: left;
  clear: none;

  &.last-col-2, &.last-col-4, &.last-col-6, &.last-col-8, &.last-col-10, &.last-col-12 {
    @include last;
    float: right;
  }

  &.last-col-3, &.last-col-5, &.last-col-7, &.last-col-9, &.last-col-11, &.last-col-1 {
    clear: both;
  }
}

@mixin last-col3 {
  &.last-col-1, &.last-col-2, &.last-col-3, &.last-col-4, &.last-col-5, &.last-col-6, &.last-col-7, &.last-col-8, &.last-col-9, &.last-col-10, &.last-col-11, &.last-col-12 {
    margin-right: $gutter-width;
    .lt-ie8 & {
      margin-right: $gutter_width - 0.25%;
    }
    float: left;
    clear: none;
  }

  &.last-col-3, &.last-col-6, &.last-col-9, &.last-col-12 {
    @include last;
    float: right;
  }
  &.last-col-4, &.last-col-7, &.last-col-10, &.last-col-1 {
    clear: both;
  }
}

@mixin last-col4 {
  &.last-col-1, &.last-col-2, &.last-col-3, &.last-col-4, &.last-col-5, &.last-col-6, &.last-col-7, &.last-col-8, &.last-col-9, &.last-col-10, &.last-col-11, &.last-col-12 {
    margin-right: $gutter-width;
    .lt-ie8 & {
      margin-right: $gutter_width - 0.25%;
    }
    float: left;
    clear: none;
  }

  &.last-col-4, &.last-col-8, &.last-col-12 {
    @include last;
    float: right;
  }
  &.last-col-5, &.last-col-9, &.last-col-1 {
    clear: both;
  }
}

@mixin last-col6 {
  &.last-col-1, &.last-col-2, &.last-col-3, &.last-col-4, &.last-col-5, &.last-col-6, &.last-col-7, &.last-col-8, &.last-col-9, &.last-col-10, &.last-col-11, &.last-col-12 {
    margin-right: $gutter-width;
    .lt-ie8 & {
      margin-right: $gutter_width - 0.25%;
    }
    float: left;
    clear: none;
  }

  &.last-col-6, &.last-col-12 {
    @include last;
    float: right;
  }
  &.last-col-7, &.last-col-1 {
    clear: both;
  }
}

@mixin mobile-grid {
  padding-left: 2.5%;
  padding-right: 2.5%;
}

@mixin grid-inset {
  max-width: 50em;
  margin-left: auto;
  margin-right: auto;
}

.grid-inset {
  @include grid-inset;
}
