@import '../mixins/viewport';
@import 'mixins';

%grid {
  // The parent will span the entire width. Clear to contain children
  width: 100%;
  @include _clear;
  // Create span classes from 1 to the maximum grid columns for this
  // particular grid.
  @for $span_i from 1 through $columns {
    & > .span-#{$span_i} {
      // each span element is fraction of this parent
      // what fraction? span-1 is 1/x of x. span-2 is 2/x of x.
      // calculate the width of the span by finding the width of
      // span-1, then multiply by the nth span
      width: 100% / $columns * $span_i;
      min-height: 1px;
      float: left;
    }
  }
}

%gutter {
  // If the gutter class is attached to the grid class, apply a padding to
  // all child span classes.
  @each $gutter in $gutters {
    &.gutter-#{$gutter} {
      padding: 0 $gutter / 2 * 1px;
      // repeat the previous loop and apply a padding
      @for $span_i from 1 through $columns {
        & > .span-#{$span_i} {
          // each element needs to get half the gutter as padding
          // they join to complete the gutter
          padding: 0 $gutter / 2 * 1px;
        }
      }
    }
  }
}

%grid-table {
  display: table;
  table-layout: fixed;
  width: 100%;
  @for $span_i from 1 through $columns {
    & > .span-#{$span_i} {
      display: table-cell;
      vertical-align: middle;
      // each span element is fraction of this parent
      // what fraction? span-1 is 1/x of x. span-2 is 2/x of x.
      // calculate the width of the span by finding the width of
      // span-1, then multiply by the nth span
      width: 100% / $columns * $span_i;
    }
  }
}

%grid-stacked-mobile {
  @include viewport-maximum(tabletPortrait) {
    @for $span_i from 1 through $columns {
      & > .span-#{$span_i} {
        display: block;
        width: 100%;
      }
    }
  }
}

.grid-#{$columns} {
  @extend %grid;
  @extend %gutter;
}

.grid-#{$columns}-vertical {
  //TODO: check if it works with multiple rows
  @extend %grid-table;
  @extend %grid-stacked-mobile;
  @extend %gutter;
}