$row-prefix-cls: "#{$css-prefix}row";
$col-prefix-cls: "#{$css-prefix}col";

@mixin make-row($gutter: $grid-gutter-width) {
  position: relative;
  margin-left: ($gutter / -2);
  margin-right: ($gutter / -2);
  height: auto;

  @include clearfix();
}

@mixin col1($index, $list,$class) { // general
  @if $index <= $grid-columns {
    $item: ".#{$col-prefix-cls}-span#{$class}-#{$index}";

    @include col1(($index + 1), "#{$list}, #{$item}",$class);
  }

  @else {
    #{$list} {
      float: left;
      flex: 0 0 auto;
    }
  }
}

@mixin col($index,$class) { // initial
  $item: ".#{$col-prefix-cls}-span#{$class}-#{$index}";

  @include col1(($index + 1), $item,$class);
}

@mixin float-grid-columns($class) {
  @include col(1,$class); // kickstart it
}

@mixin loop-grid-columns($index, $class) {
  @if $index > 0 {
    .#{$col-prefix-cls}-span#{$class}-#{$index} {
      display: block;
      width: percentage(($index / $grid-columns));
    }
    .#{$col-prefix-cls}#{$class}-push-#{$index} {
      left: percentage(($index / $grid-columns));
    }
    .#{$col-prefix-cls}#{$class}-pull-#{$index} {
      right: percentage(($index / $grid-columns));
    }
    .#{$col-prefix-cls}#{$class}-offset-#{$index} {
      margin-left: percentage(($index / $grid-columns));
    }
    .#{$col-prefix-cls}#{$class}-order-#{$index} {
      order: $index;
    }

    @include loop-grid-columns(($index - 1), $class);
  }

  @else if $index == 0 {
    .#{$col-prefix-cls}-span#{$class}-#{$index} {
      display: none;
    }
    .#{$col-prefix-cls}#{$class}-push-#{$index} {
      left: auto;
    }
    .#{$col-prefix-cls}#{$class}-pull-#{$index} {
      right: auto;
    }
  }

  // @else {

  // }
}


@mixin make-grid($class: "") {
  @include float-grid-columns($class);
  @include loop-grid-columns($grid-columns, $class);
}