@import "./vars.less";

/**
 * generates .ds-grid .row and .col-* classes
 * @spacing  Margins on the sides and between columns
 * @ncol     Number of columns in a layout
 * @ncol-max Maximum number for .col-[n] classes to generate.
 */
.generateGrid(@spacing, @ncol, @ncol-max) {
  .ds-grid {
    > .row {
      display: flex;
      align-items: stretch;
      flex-direction: row;
      flex-wrap: wrap;
      padding-left: @spacing / 2;
      padding-right: @spacing / 2;
    }

    // <div class="row-col">...</div> is a "shortcut" to
    // <div class="row"><div class="col-12">...</div></div>
    > .row-col {
      padding: @vu @spacing;
    }

    > .row > [class^="col-"] {
      display: flex;
      flex-grow: 1;
      flex-shrink: 0;
      &> * {
        flex-grow: 1;
        margin: @vu @spacing / 2;
      }
    }

    .generateCols(@counter) when (@counter > 0) {

      @width: (min(@counter, @ncol) / @ncol ) * 100;
      > .row > .col-@{counter} {
        width: ~"@{width}%";
      }
      .generateCols((@counter - 1));
    }
    .generateCols(@ncol-max);
  }
}

@media @screen-extra-large {
  .generateGrid(@spacing-extra-large, @ncol, @ncol);
}

@media @screen-large {
  .generateGrid(@spacing-large, @ncol, @ncol);
}

@media @screen-medium {
  .generateGrid(@spacing-medium, @ncol, @ncol);
}

@media @screen-small {
  .generateGrid(@spacing-small, @ncol-small, @ncol);
}