@use 'variables' as vars;
@use 'functions' as fn;

@mixin gap-value($i, $property) {
  @if $i ==0 {
    #{$property}: 0;
  }

  @else {
    #{$property}: fn.rem($i * vars.$gap-step);
  }
}

.gap {
  @for $i from 0 through vars.$gap-count {
    &-#{$i} {
      @include gap-value($i, 'gap');
    }

    &-x-#{$i} {
      @include gap-value($i, 'column-gap');
    }

    &-y-#{$i} {
      @include gap-value($i, 'row-gap');
    }
  }
}