//=======================================================
//                     Grid System
//=======================================================

@mixin make-flex() {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($grow-shrink-basis) {
  -ms-flex: $grow-shrink-basis;
  -webkit-flex: $grow-shrink-basis;
  flex: $grow-shrink-basis;
}

@mixin flex-direction($direction) {
  -webkit-flex-direction: $direction;
  -ms-flex-direction: $direction;
  flex-direction: $direction;
}

@mixin flex-wrap($wrap) {
  -webkit-flex-wrap: $wrap;
  -ms-flex-wrap: $wrap;
  flex-wrap: $wrap;
}

@mixin flex-grow($grow) {
  -webkit-flex-grow: $grow;
  -ms-flex-positive: $grow;
  flex-grow: $grow;
}

@mixin flex-basis($basis) {
  -webkit-flex-basis: $basis;
  -ms-flex-preferred-size: $basis;
  flex-basis: $basis;
  max-width: $basis;
}

@mixin justify-content($align) {
  -webkit-justify-content: $align;
  @if ($align == "flex-start") {
    -ms-flex-pack: start;
  } @else if ($align == "flex-end") {
    -ms-flex-pack: end;
  } @else if ($align == "space-around") {
    -ms-flex-pack: distribute;
  } @else if ($align == "space-between") {
    -ms-flex-pack: justify;
  } @else {
    -ms-flex-pack: $align;
  }
  justify-content: $align;
}

@mixin align-content($align){
  -webkit-align-content: $align;
  @if ($align == "flex-start") {
    -ms-flex-pack: start;
  } @else if ($align == "flex-end") {
    -ms-flex-pack: end;
  } @else if ($align == "space-around") {
    -ms-flex-pack: distribute;
  } @else if ($align == "space-between") {
    -ms-flex-pack: justify;
  } @else if ($align == "center") {
    -ms-flex-pack: center;
  } @else if ($align == "stretch") {
    -ms-flex-pack: stretch;
  } @else {
    -ms-flex-pack: $align;
  }
  align-content: $align;
}

@mixin align-items($valign) {
  -webkit-align-items: $valign;
  @if ($valign == "flex-start") {
    -ms-flex-align: start;
  } @else if ($valign == "flex-end") {
    -ms-flex-align: end;
  } @else {
    -ms-flex-align: $valign;
  }
  align-items: $valign;
}

@mixin align-self($valign) {
  -webkit-align-self: $valign;
  @if ($valign == "flex-start") {
    -ms-flex-item-align: start;
  } @else if ($valign == "flex-end") {
    -ms-flex-item-align: end;
  } @else {
    -ms-flex-item-align: $valign;
  }
  align-self: $valign;
}

@mixin order($order) {
  -webkit-order: $order;
  -ms-flex-order: $order;
  order: $order
}

@mixin make-container($gutter: 30px) {
  margin-right: auto;
  margin-left: auto;
  padding-left: ($gutter / 2);
  padding-right: ($gutter / 2);
}

@mixin make-row($gutter: 30px) {
  margin-left: ceil(($gutter / -2));
  margin-right: floor(($gutter / -2));
}

@mixin make-col($gutter: 30px) {
  padding-left: ceil(($gutter / 2));
  padding-right: floor(($gutter / 2));
}

@mixin make-grid($resolution, $count: 12) {
  .col-#{$resolution}-preffix-0 {
    margin-left: 0%;
  }

  @for $i from 1 through $count {
    @if ($i == 4) {
      .col-#{$resolution}-#{$i} {
        @include flex-basis(percentage($i / $count) + 0.00001%);
      }
    } @else {
      .col-#{$resolution}-#{$i} {
        @include flex-basis(percentage($i / $count));
      }
    }

    .col-#{$resolution}-preffix-#{$i} {
      margin-left: percentage($i / $count);
    }

    .col-#{$resolution}-push-#{$i} {
      @include order($i);
    }
  }
}

@mixin make-fallback($resolution, $count: 12) {
  @for $i from 1 through $count {
    .col-xs-#{$i}{
      margin-left: auto;
      margin-right: auto;
      max-width: percentage($i / $count);
    }
  }

  @for $i from 1 through $count {
    .col-sm-#{$i}{
      margin-left: auto;
      margin-right: auto;
      max-width: percentage($i / $count);
    }
  }

  @for $i from 1 through $count {
    .col-md-#{$i}{
      margin-left: auto;
      margin-right: auto;
      max-width: percentage($i / $count);
    }
  }

  @for $i from 1 through $count {
    .col-lg-#{$i} {
      margin-left: auto;
      margin-right: auto;
      max-width: percentage($i / $count);
    }
  }

  [class*="col-xs-preffix-"],
  [class*="col-sm-preffix-"],
  [class*="col-md-preffix-"],
  [class*="col-lg-preffix-"]{
    margin-left: auto;
  }
}

@mixin make-grid-system($resolution) {
  .row-#{$resolution}-center {
    @include justify-content(center);
  }

  .row-#{$resolution}-left {
    @include justify-content(flex-start);
  }

  .row-#{$resolution}-right {
    @include justify-content(flex-end);
  }

  .row-#{$resolution}-justify {
    @include justify-content(space-between);
  }

  .row-#{$resolution}-around {
    @include justify-content(space-around);
  }

  .row-#{$resolution}-top {
    @include align-items(flex-start);
  }

  .row-#{$resolution} {
    @include flex-direction(row);
  }

  .row-#{$resolution}-reverse {
    @include flex-direction(row-reverse);
  }

  .row-#{$resolution}-middle {
    @include align-items(center);
  }

  .row-#{$resolution}-bottom {
    @include align-items(flex-end);
  }

  .col-#{$resolution}-top {
    @include align-self(flex-start);
  }

  .col-#{$resolution}-middle {
    @include align-self(center);
  }

  .col-#{$resolution}-bottom {
    @include align-self(flex-end);
  }

  .row > {
    @include make-grid($resolution, $column-count);
  }
}