// Margin spacer utilities for marketing
// Utilities only added for y-direction margin (i.e. top & bottom)
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
@for $i from 1 through length($marketingSpacers) {
  $size: #{nth($marketingSpacers, $i)};
  $scale: #{$i + 6};  // 7, 8, 9, 10, 11

  /* Set a #{$size} margin on the top */
  .mt-#{$scale} { margin-top   : #{$size} !important; }
  /* Set a #{$size} margin on the bottom */
  .mb-#{$scale} { margin-bottom: #{$size} !important; }

  /* Set a #{$size} margin on the top & bottom */
  .my-#{$scale} {
    margin-top   : #{$size} !important;
    margin-bottom: #{$size} !important;
  }
}

// Loop through the breakpoint values
@each $breakpoint in map-keys($breakpoints) {

  // Loop through the spacer values
  @for $i from 1 through length($marketingSpacers) {
    @include breakpoint($breakpoint) {
      $size: #{nth($marketingSpacers, $i)}; // sm, md, lg, xl
      $scale: #{$i + 6};  // 7, 8, 9, 10, 11

      /* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
      .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
      /* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
      .mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }

      /* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
      .my-#{$breakpoint}-#{$scale} {
        margin-top: #{$size} !important;
        margin-bottom: #{$size} !important;
      }
    }
  }
}