// Here we generate spacing utility classes for our sizes for all box sides and axis.
// These will output to classes like .px-m (Padding on x-axis, medium size) or .mr-l (Margin right, large size)

@mixin spacing($prop, $propLetter) {
  @each $sizeLetter, $size in $spacing {
    .#{$propLetter}-#{$sizeLetter} {
      #{$prop}: $size !important;
    }
    .#{$propLetter}x-#{$sizeLetter} {
      #{$prop}-inline-start: $size !important;
      #{$prop}-inline-end: $size !important;
    }
    .#{$propLetter}y-#{$sizeLetter} {
      #{$prop}-top: $size !important;
      #{$prop}-bottom: $size !important;
    }
    .#{$propLetter}t-#{$sizeLetter} {
      #{$prop}-top: $size !important;
    }
    .#{$propLetter}r-#{$sizeLetter} {
      #{$prop}-inline-end: $size !important;
    }
    .#{$propLetter}b-#{$sizeLetter} {
      #{$prop}-bottom: $size !important;
    }
    .#{$propLetter}l-#{$sizeLetter} {
      #{$prop}-inline-start: $size !important;
    }
  }
}
@include spacing('margin', 'm');
@include spacing('padding', 'p');

@each $sizeLetter, $size in $spacing {
  .gap-#{$sizeLetter} {
    gap: $size !important;
  }
  .gap-x-#{$sizeLetter} {
    column-gap: $size !important;
  }
  .gap-y-#{$sizeLetter} {
    row-gap: $size !important;
  }
}