/* === Grid === */
.weui-row {
  .flexbox();
  .justify-content(space-between);
  .flex-wrap(wrap);
  .align-items(flex-start);
  > [class*="col-"] {
    box-sizing: border-box;
  }
}
@cols: 5, 10, 15, 20, 25, 100/3, 40, 50, 60, 100*(2/3), 75, 80, 85, 90, 95, 100;
.weui-row {
  .col-auto {
    width: 100%;
  }
  .-(@i: length(@cols)) when (@i > 0) {
    @divider: e(extract(@cols, @i));
    @className: `Math.floor(@{divider})`;
    @n: `100/parseFloat(@{divider})`;
    @n-1: @n - 1;
    .weui-col-@{className} {
      width: ~"@{divider}%";
      width: ~"-webkit-calc((100% - 15px*@{n-1}) / @{n})";   
      width: ~"calc((100% - 15px*@{n-1}) / @{n})";   
    }
    &.weui-no-gutter {
      .weui-col-@{className} {
        width: ~"@{divider}%";
      }
    }
    .-((@i - 1));
  } .-;
  .--(@j: 1) when (@j < length(@cols)) {
    @divider: e(extract(@cols, @j));
    @className: `Math.floor(@{divider})`;
    .weui-col-auto:nth-last-child(@{j}), .weui-col-auto:nth-last-child(@{j}) ~ .weui-col-auto {
      @j-1: @j - 1;  
      width: 100% / @j;
      width: ~"-webkit-calc((100% - 15px*@{j-1}) / @{j})";   
      width: ~"calc((100% - 15px*@{j-1}) / @{j})";   
    }
    &.weui-no-gutter {
      .weui-col-auto:nth-last-child(@{j}), .weui-col-auto:nth-last-child(@{j}) ~ .weui-col-auto {
        width: 100% / @j;
      }
    }
    .--((@j + 1));
  } .--;

}

@media all and (min-width:768px) {
  .row {
    .-(@i: length(@cols)) when (@i > 0) {
      @divider: e(extract(@cols, @i));
      @className: `Math.floor(@{divider})`;
      @n: `100/parseFloat(@{divider})`;
      @n-1: @n - 1;
      .tablet-@{className} {
        width: ~"@{divider}%";
        width: ~"-webkit-calc((100% - 15px*@{n-1}) / @{n})";   
        width: ~"calc((100% - 15px*@{n-1}) / @{n})";   
      }
      &.no-gutter {
        .tablet-@{className} {
          width: ~"@{divider}%";
        }
      }
      .-((@i - 1));
    } .-;
    .--(@j: 1) when (@j < length(@cols)) {
      .tablet-auto:nth-last-child(@{j}), .tablet-auto:nth-last-child(@{j}) ~ .col-auto {
        @j-1: @j - 1;  
        width: 100% / @j;
        width: ~"-webkit-calc((100% - 15px*@{j-1}) / @{j})";   
        width: ~"calc((100% - 15px*@{j-1}) / @{j})";   
      }
      &.no-gutter {
        .tablet-auto:nth-last-child(@{j}), .tablet-auto:nth-last-child(@{j}) ~ .tablet-auto {
          width: 100% / @j;
        }
      }
      .--((@j + 1));
    } .--;
  }

}
