@use 'sass:math';

@import 'themes/default';

.Column {
  flex: 1;
  margin-bottom: 0;
  padding-left: calc(var(--Row____column-gap) / 2);
  padding-right: calc(var(--Row____column-gap) / 2);
}

.Row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--Row____column-gap) / 2);
  margin-right: calc(-1 * var(--Row____column-gap) / 2);

  @for $num from 1 through 10 {
    @for $dem from $num through 10 {
      > .Column--#{$num}of#{$dem} {
        flex-grow: 0;
        flex-basis: percentage(math.div($num, $dem));
      }
    }
  }
}

.Row--column-gap--none {
  --Row____column-gap: 0;
}

.Row--column-gap--tiny {
  --Row____column-gap: 0.5em;
}

.Row--column-gap--small {
  --Row____column-gap: 1.5em;
}

.Row--column-gap--default {
  --Row____column-gap: 2em;
}