// stylelint-disable declaration-no-important
@use '../settings/variables' as v;

@each $name in map-keys(v.$spacers) {
  $value: map-get(v.$spacers, $name);
  .qpp-u-gap--#{$name} {
    gap: $value;
  }

  .qpp-u-row-gap--#{$name} {
    row-gap: $value;
  }

  .qpp-u-column-gap--#{$name} {
    column-gap: $value;
  }
}

@each $breakpoint in map-keys(v.$breakpoints) {
  $viewport: map-get(v.$breakpoints, $breakpoint);

  @media (min-width: $viewport) {
    @each $name in map-keys(v.$spacers) {
      $value: map-get(v.$spacers, $name);
      .qpp-u-#{$breakpoint}-gap--#{$name} {
        gap: $value;
      }

      .qpp-u-#{$breakpoint}-row-gap--#{$name} {
        row-gap: $value;
      }

      .qpp-u-#{$breakpoint}-column-gap--#{$name} {
        column-gap: $value;
      }
    }
  }
}