@import '../variables.less';
@import '../mixins.less';

.row {
  overflow: hidden;
  margin-left: -4%;
  > [class*="col-"], > [class*="tablet-"] {
    box-sizing: border-box;
    float: left;
  }
  &.no-gutter {
    margin-left: 0;
  }
}
@cols: 5, 10, 15, 20, 25, 100/3, 40, 50, 60, 100*(2/3), 75, 80, 85, 90, 95, 100;
.row {
  .-(@i: length(@cols)) when (@i > 0) {
    @divider: e(extract(@cols, @i));
    @className: `Math.floor(@{divider})`;
    @n: `100/parseFloat(@{divider})`;
    @n-1: @n - 1;
    @gutter: `4.0`;
    @d: `(100-@{gutter}*@{n})/@{n}`;
    .col-@{className} {
      width: ~"@{d}%";
      margin-left: ~"@{gutter}%";
    }
    &.no-gutter {
      @d: `100/@{n}`;
      .col-@{className} {
        width: ~"@{d}%";
        margin: 0;
      }
    }
    .-((@i - 1));
  } .-;
}
@media all and (min-width:768px) {
  .row {
    margin-left: -2%;
  }
  .row {
    .-(@i: length(@cols)) when (@i > 0) {
      @divider: e(extract(@cols, @i));
      @className: `Math.floor(@{divider})`;
      @n: `100/parseFloat(@{divider})`;
      @n-1: @n - 1;
      @gutter: `2.0`;
      @d: `(100-@{gutter}*@{n})/@{n}`;
      .col-@{className} {
        width: ~"@{d}%";
        margin-left: ~"@{gutter}%";
      }
      &.no-gutter {
        @d: `100/@{n}`;
        .col-@{className} {
          width: ~"@{d}%";
          margin: 0;
        }
      }
      .-((@i - 1));
    } .-;
  }
  .row {
    .-(@i: length(@cols)) when (@i > 0) {
      @divider: e(extract(@cols, @i));
      @className: `Math.floor(@{divider})`;
      @n: `100/parseFloat(@{divider})`;
      @n-1: @n - 1;
      @gutter: `2.0`;
      @d: `(100-@{gutter}*@{n})/@{n}`;
      .tablet-@{className} {
        width: ~"@{d}%";
        margin-left: ~"@{gutter}%";
      }
      &.no-gutter {
        @d: `100/@{n}`;
        .tablet-@{className} {
          width: ~"@{d}%";
          margin: 0;
        }
      }
      .-((@i - 1));
    } .-;
  }
}