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

.container {
  max-width: 100%;
  width: 100%;
  margin: auto;
  padding: 0 $gutter;
  &.xl {
    width: $xl;
  }
  &.l {
    width: $l;
  }
  &.m {
    width: $m;
  }
  &.s {
    width: $s;
  }
  @include s() {
    padding: 0 $gutter/2;
  }
  &.collapse {
    padding: 0;
  }
}

// Rows

.row {
  margin: 0 (-$gutter/2) $gutter;
  // Table Grid
  &.table { @include table(); }
  &.xl-table { @include xl() { @include table(); } }
  &.l-table { @include l() { @include table(); } }
  &.m-table { @include m() { @include table(); } }
  &.s-table { @include s() { @include table(); } }

  // Reverse Grid
  &.reverse { @include reverse(); }
  &.xl-reverse { @include xl() { @include reverse(); } }
  &.l-reverse { @include l() { @include reverse(); } }
  &.m-reverse { @include m() { @include reverse(); } }
  &.s-reverse { @include s() { @include reverse(); } }

  // Standard Grid
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  &.collapse {
    margin: 0;
    .column {
      padding: 0;
    }
  }

  // No bottom margin
  &.no-margin { margin-bottom: 0; }
}

// Column Grid

.column {
  float: left;
  min-height: 0.125rem;
  padding: 0 $gutter/2;
}
.l1 { width: percentage(1/12); }
.l2 { width: percentage(2/12); }
.l3 { width: percentage(3/12); }
.l4 { width: percentage(4/12); }
.l5 { width: percentage(5/12); }
.l6 { width: percentage(6/12); }
.l7 { width: percentage(7/12); }
.l8 { width: percentage(8/12); }
.l9 { width: percentage(9/12); }
.l10 { width: percentage(10/12); }
.l11 { width: percentage(11/12); }
.l12 { width: 100%; }
// Custom columns
.lfifth { width: percentage(1/5); }
@include m() {
  .m1 { width: percentage(1/12); }
  .m2 { width: percentage(2/12); }
  .m3 { width: percentage(3/12); }
  .m4 { width: percentage(4/12); }
  .m5 { width: percentage(5/12); }
  .m6 { width: percentage(6/12); }
  .m7 { width: percentage(7/12); }
  .m8 { width: percentage(8/12); }
  .m9 { width: percentage(9/12); }
  .m10 { width: percentage(10/12); }
  .m11 { width: percentage(11/12); }
  .m12 { width: 100%; }
  // Custom columns
  .mfifth { width: percentage(1/5); }
}
@include s() {
  .s1 { width: percentage(1/12); }
  .s2 { width: percentage(2/12); }
  .s3 { width: percentage(3/12); }
  .s4 { width: percentage(4/12); }
  .s5 { width: percentage(5/12); }
  .s6 { width: percentage(6/12); }
  .s7 { width: percentage(7/12); }
  .s8 { width: percentage(8/12); }
  .s9 { width: percentage(9/12); }
  .s10 { width: percentage(10/12); }
  .s11 { width: percentage(11/12); }
  .s12 { width: 100%; }
}

// Uniform Height Clearing

.l2:nth-child(6n+1) { clear: both; }
.l3:nth-child(4n+1) { clear: both; }
.l4:nth-child(3n+1) { clear: both; }
.l6:nth-child(2n+1) { clear: both; }
@include l() {
  .l2:nth-child(6n+1) { clear: both; }
  .l3:nth-child(4n+1) { clear: both; }
  .l4:nth-child(3n+1) { clear: both; }
  .l6:nth-child(2n+1) { clear: both; }
}
@include m() {
  .m2:nth-child(6n+1) { clear: both; }
  .m3:nth-child(4n+1) { clear: both; }
  .m4:nth-child(3n+1) { clear: both; }
  .m6:nth-child(2n+1) { clear: both; }
}
@include s() {
  .s2:nth-child(6n+1) { clear: both; }
  .s3:nth-child(4n+1) { clear: both; }
  .s4:nth-child(3n+1) { clear: both; }
  .s6:nth-child(2n+1) { clear: both; }
}

.row.non-uniform {
  .l2:nth-child(6n+1),
  .l3:nth-child(4n+1),
  .l4:nth-child(3n+1),
  .l6:nth-child(2n+1),
  .l2:nth-child(6n+1),
  .l3:nth-child(4n+1),
  .l4:nth-child(3n+1),
  .l6:nth-child(2n+1),
  .m2:nth-child(6n+1),
  .m3:nth-child(4n+1),
  .m4:nth-child(3n+1),
  .m6:nth-child(2n+1),
  .s2:nth-child(6n+1),
  .s3:nth-child(4n+1),
  .s4:nth-child(3n+1),
  .s6:nth-child(2n+1) {
    clear: none;
  }
}

@include l() {
  .column.l-clear { clear: both; }
}
@include m() {
  .column.m-clear { clear: both; }
}
@include s() {
  .column.s-clear { clear: both; }
}

// Flex Grid

.flex {
  @include flex();
  @include box-orient--vertical();
  @include flex-direction(column);
  .row {
    @include flex();
    @include flex-direction(row);
    .box {
      margin: 0 $gutter/2 $gutter;
      flex: auto;
      align-self: center;
      &:first-child {
        margin-left: 0;
      }
      &:last-child {
        margin-right: 0;
      }
      &.center {
        text-align: center;
        align-items: center;
      }
    }
    @include s() {
      @include flex-direction(column);
      .box {
        width: 100%;
        margin: 0 0 $gutter;
      }
    }
  }
}

@include xl() {
  .xl-hide { display: none !important; }
  .xl-left { text-align: left; }
  .xl-center { text-align: center; }
  .xl-right { text-align: right; }
  .l-show, .m-show, .s-show { display: none !important; }
}
@include l() {
  .l-hide { display: none !important; }
  .l-left { text-align: left; }
  .l-center { text-align: center; }
  .l-right { text-align: right; }
  .xl-show, .m-show, .s-show { display: none !important; }
}
@include m() {
  .m-hide { display: none !important; }
  .m-left { text-align: left; }
  .m-center { text-align: center; }
  .m-right { text-align: right; }
  .l-show { display: none !important; }
  .xl-show, .l-show, .s-show { display: none !important; }
}
@include s() {
  .s-hide { display: none !important; }
  .s-left { text-align: left; }
  .s-center { text-align: center; }
  .s-right { text-align: right; }
  .l-show { display: none !important; }
  .xl-show, .l-show, .m-show { display: none !important; }
}
