//////////////////////////////
// Grid
//
// A float-based custom mixin to create grids,
// very similar to Bootstrap's grid system.
//
// Basic Usage:
//
// .some-element-with-5-columns {
//   @include grid(5);
// }
//
// Example of how to remove the right margin of the last grid element in a row:
// .grid-column-7 {
//   @include grid(7, false);
// }
//////////////////////////////
@mixin grid(
    $columns,
    $has-left-gutter: false,
    $has-right-gutter: true,
    $wrap-gutter-right: false,
    $total-columns: 12,
    $gutter: 1 / 3,
    $push-left: 0
  ) {

  // all widths are raw percentage values
  $total-width: 100;
  $column-width: $total-width / ($total-columns + ($total-columns - 1) * $gutter);
  $gutter-width: $column-width / 3;
  $grid-width: $column-width * $columns + $gutter-width * ($columns - 1);
  $push-left-width: ($column-width + $gutter-width) * $push-left;

  @if $wrap-gutter-right == true {
    $grid-width: $grid-width + $gutter-width;
  }

  width: #{($grid-width) + '%'};
  @include _gutter($gutter-width, $has-left-gutter, $has-right-gutter, $push-left-width: $push-left-width);
  float: left;
  display: block;
};

//////////////////////////////
// Grid-reset
//
// Reseting the properties affected by @mixin grid;
//
// Useful in responsive breakpoints, where you want to reset
// the styles of a previous breakpoint that uses @mixin grid
//
// Basic Usage:
//
// .grid-element {
//   @include grid(12);
//
//   @include breakpoint(180px) {
//     @include grid-reset;
//     @include grid(6);
//   }
// }
//////////////////////////////
@mixin grid-reset {
  width: auto;
  float: none;
  margin-left: 0rem;
  margin-right: 0rem;
  display: block;
}

@mixin _gutter($gutter-width, $left: false, $right: true, $push-left-width: 0) {
  $margin-left: 0;
  @if $push-left-width > 0 {
    $margin-left: $margin-left + $push-left-width;
  }
  @if $left == true {
    $margin-left: $margin-left + $gutter-width;
  }
  @if ($margin-left > 0rem) {
    margin-left: #{($margin-left) + '%'};
  }

  @if $right == true {
    margin-right: #{($gutter-width) + '%'};
  }
}