// Custom column classes
// e.g. 'col-sm-8 col-md-10'
// min small viewport takes up 8 out of 12 columns
// min medium viewport takes up 10 columns
// if undefined, element defaults to 100% width
.make-columns(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) {
  @media (min-width: @media-query) {
    .boxmenu-item.col-@{size}-@{iteration} {
      width: (@iteration * 100% / @count);
    }
    .component.col-@{size}-@{iteration} {
      width: (@iteration * 100% / @count);
    }
  }

  .make-columns(@size, @media-query, @count, (@iteration + 1));
}

.make-columns(xs, 0, 12); // deprecated: backward compatibility only
.make-columns(sm, @device-width-small, 12);
.make-columns(md, @device-width-medium, 12);
.make-columns(lg, @device-width-large, 12);
.make-columns(xl, @device-width-xlarge, 12);

// Custom column starting margin classes
// e.g. 'margin-start-sm-2 margin-start-md-1'
// min small viewport indents 2 columns from the left (or right for RTL)
// min medium viewport indents 1 column from the left (or right for RTL)
.make-margin-start(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) {
  @media (min-width: @media-query) {
    .boxmenu-item.margin-start-@{size}-@{iteration} {
      margin-inline-start: (@iteration * 100% / @count);
    }
    .component.margin-start-@{size}-@{iteration} {
      margin-inline-start: (@iteration * 100% / @count);
    }
  }

  .make-margin-start(@size, @media-query, @count, (@iteration + 1));
}

.make-margin-start(sm, @device-width-small, 12);
.make-margin-start(md, @device-width-medium, 12);
.make-margin-start(lg, @device-width-large, 12);
.make-margin-start(xl, @device-width-xlarge, 12);

// Custom column ending margin classes
// e.g. 'margin-end-sm-2 margin-end-md-1'
// min small viewport indents 2 columns from the right (or left for RTL)
// min medium viewport indents 1 column from the right (or left for RTL)
.make-margin-end(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) {
  @media (min-width: @media-query) {
    .boxmenu-item.margin-end-@{size}-@{iteration} {
      margin-inline-end: (@iteration * 100% / @count);
    }
    .component.margin-end-@{size}-@{iteration} {
      margin-inline-end: (@iteration * 100% / @count);
    }
  }

  .make-margin-end(@size, @media-query, @count, (@iteration + 1));
}

.make-margin-end(sm, @device-width-small, 12);
.make-margin-end(md, @device-width-medium, 12);
.make-margin-end(lg, @device-width-large, 12);
.make-margin-end(xl, @device-width-xlarge, 12);
