@use "../../variables/index" as *;

@mixin make-flex-cols($n: 12, $i: 1) {
  @if $i <= $n {
    .col-#{$i} {
      min-width: calc((8.333333333% * $i) - (var(--c8y-margin) * 2));
    }
    @include make-flex-cols($n, ($i + 1));
  }
}

@mixin make-flex-cols-container($n: 150, $i: 20) {
  @if $i <= $n {
    .content-flex-#{$i} {
      --c8y-multiplier: calc((#{$i} * 1rem) - 100%);
    }
    @include make-flex-cols-container($n, ($i + 1));
  }
}

[class*="content-flex-"]{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  --c8y-margin: 1rem;
  margin: 0 calc(var(--c8y-margin) * -1);
  
  > *{
    max-width: 100%;
    flex-basis: calc(var(--c8y-multiplier) * 999);
    margin: 0 var(--c8y-margin);
  }
}

@include make-flex-cols-container();

[class*="content-flex-"]{
  @include make-flex-cols();
}