//############################################//
//################ Grid System ##############//
//###########################################//

@mixin grid-columns($columns: $number-of-columns) {
  $column-width: 100 / $columns;

  @for $i from 1 through $columns {
    .col-#{$i} {
      width: percentage(($column-width * $i) / 100);
    }
  }
}

@mixin grid-columns-offset($columns: $offset-columns) {
  $column-width: 100 / $columns;

  @for $i from 1 through $columns {
    .offset-#{$i} {
      margin-left: percentage(($column-width * $i) / 100);
    }
  }

}

.row {
  @extend %clearfix;
  @include grid-columns;
  @include grid-columns-offset;
  display: block;

  [class*="col-"] {
    float: left;

    &.full-height {
      height: 100%;
    }
  }
}


@media screen and (max-width: $grid-break) {
  .row:not(.fixed) {
    [class*="col-"] {
      width: 100%;
    }

    [class*="offset-"] {
      margin-left: 0;
    }
  }
}


//############################################//
//########### Flex Grid System ##############//
//###########################################//

.row-flex {
  @include grid-columns;
  @include grid-columns-offset;
  display: flex;

  [class*="col-"] {
    display: inline-grid;
    flex: none;
    flex-grow: 1;
    flex-shrink: 1;

    &.full-height {
      height: 100%;
    }
  }
}

@media screen and (max-width: $grid-break) {
  .row-flex:not(.fixed) {
    flex-direction: column;

    [class*="col-"] {
      flex: 1;
      width: 100%;
    }

    [class*="offset-"] {
      margin-left: 0;
    }
  }
}