@use 'sass:math';

@import '../config/variables.scss';
@import '../config/mixins.scss';


.row {
  @include flexbox;
  > * {
    @include maxsize;
  }
  // row-h-{number}
  @for $i from 1 through $max-row {
    &-h-#{$i} {
      height: math.div(100%, $max-row) * $i;
    }
  }
  // row-h-{breakpoint}-{number}
  @each $query, $_ in $breakpoints {
    @include use-breakpoint($query) {
      @for $i from 1 through $max-row {
        &-h-#{$query}-#{$i} {
          height: math.div(100%, $max-row) * $i;
        }
      }
    }
  }
}

.col {
  flex: 1 0 0%;
  // col-{number}
  @for $i from 1 through $max-col {
    &-#{$i} {
      flex: 0 0 auto;
      width: math.div(100%, $max-col) * $i;
    }
  }
  // col-{breakpoint}-{number}
  @each $query, $_ in $breakpoints {
    @include use-breakpoint($query) {
      @for $i from 1 through $max-col {
        &-#{$query}-#{$i} {
          flex: 0 0 auto;
          width: math.div(100%, $max-col) * $i;
        }
      }
    }
  }
}

// row-cols-{number}
.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}
@for $i from 1 through $max-col {
  .row-cols-#{$i} > * {
    flex: 0 0 auto;
    width: math.div(100%, $i);
  }
}

// row-cols-{breakpoint}-{number}
@each $query, $_ in $breakpoints {
  @include use-breakpoint($query) {
    .row-cols-#{$query}-auto > * {
      flex: 0 0 auto;
      width: auto;
    }
    @for $i from 1 through $max-col {
      .row-cols-#{$query}-#{$i} > * {
        flex: 0 0 auto;
        width: math.div(100%, $i);
      }
    }
  }
}