/**
 * column
 */

// col-auto


.col-auto(@breakpoint: none) when (@breakpoint = none) {
  .flex-none();
  max-width: 100%;
  width: auto;
}

.col-auto(@breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    .flex-none();
    max-width: none;
    width: auto;
  }
}

// col-custom

.col-custom(@val, @breakpoint: none) when (@breakpoint = none) {
  flex: 0 0 auto; // flex-grow flex-shrink flex-basis
  max-width: @val;
  width: @val;
}

.col-custom(@val, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @media @@query-min {
    flex: 0 0 auto; // flex-grow flex-shrink flex-basis
    max-width: @val;
    width: @val;
  }
}

// col

.col(@number, @breakpoint: none) when (@breakpoint = none) {
  @val: (percentage(@number / @columns));
  flex: 0 0 auto; // flex-grow flex-shrink flex-basis
  max-width: @val;
  width: @val;
}

.col(@number, @breakpoint: none) when (default()) {
  @query-min: 'min-@{breakpoint}';
  @val: (percentage(@number / @columns));
  @media @@query-min {
    flex: 0 0 auto; // flex-grow flex-shrink flex-basis
    max-width: @val;
    width: @val;
  }
}

/**
 * @generate-grid
 */

// generate

& when not (@generate-grid = false) {

  // generate-grid

  .generate-grid(@breakpoint: none; @i: 1) when (@i =< @columns) {
    .generate-grid(@breakpoint; (@i + 1));
    & when (@breakpoint = none) {
      .col-@{i} {
        .col(@i) !important;
      }
    }
    & when not (@breakpoint = none) {
      .col-@{i}-@{breakpoint} {
        .col(@i) !important;
      }
    }
  }

  // generate-grids

  .generate-grids();
  .generate-grids(@breakpoint: none) {
    & when (@breakpoint = none) {
      // grid
      .col-auto {
        .col-auto() !important;
      }
      .generate-grid() !important;
    }
    & when not (@breakpoint = none) {
      @query-min: 'min-@{breakpoint}';
      @media @@query-min {
        // grid
        .col-auto-@{breakpoint} {
          .col-auto() !important;
        }
        .generate-grid(@breakpoint) !important;
      }
    }
  }

  // generate-grid-responsive

  & when not (@generate-grid = true) {

    .generate-grid-responsive();
    .generate-grid-responsive(@i: length(@generate-grid)) when (@i > 0) {
      .generate-grid-responsive(@i - 1);
      @breakpoint: extract(@generate-grid, @i);
      .generate-grids(@breakpoint);
    }

  }

}