// Breakpoints matching typical Bootstrap breakpoints
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

// Spacer values (1 to 5) mapped to rem
$spacers: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 3rem
);

@mixin generate-utilities($breakpoint: "") {
  @each $size-key, $size-val in $spacers {
      
    // Padding and Margin (all sides)
    .p#{$breakpoint}-#{$size-key} { padding: $size-val !important; }
    .m#{$breakpoint}-#{$size-key} { margin: $size-val !important; }

    // Top
    .pt#{$breakpoint}-#{$size-key} { padding-top: $size-val !important; }
    .mt#{$breakpoint}-#{$size-key} { margin-top: $size-val !important; }

    // Right / End
    .pr#{$breakpoint}-#{$size-key} { padding-right: $size-val !important; }
    .mr#{$breakpoint}-#{$size-key} { margin-right: $size-val !important; }

    // Bottom
    .pb#{$breakpoint}-#{$size-key} { padding-bottom: $size-val !important; }
    .mb#{$breakpoint}-#{$size-key} { margin-bottom: $size-val !important; }

    // Left / Start
    .pl#{$breakpoint}-#{$size-key} { padding-left: $size-val !important; }
    .ml#{$breakpoint}-#{$size-key} { margin-left: $size-val !important; }

    // X-axis (left and right)
    .px#{$breakpoint}-#{$size-key} {
      padding-left: $size-val !important;
      padding-right: $size-val !important;
    }
    .mx#{$breakpoint}-#{$size-key} {
      margin-left: $size-val !important;
      margin-right: $size-val !important;
    }

    // Y-axis (top and bottom)
    .py#{$breakpoint}-#{$size-key} {
      padding-top: $size-val !important;
      padding-bottom: $size-val !important;
    }
    .my#{$breakpoint}-#{$size-key} {
      margin-top: $size-val !important;
      margin-bottom: $size-val !important;
    }
  }
}

// 1. Generate default utilities (without breakpoint modifier)
@include generate-utilities("");

// 2. Generate utilities for each breakpoint using an @each loop
@each $bp-name, $bp-min-width in $breakpoints {
  @media (min-width: $bp-min-width) {
    @include generate-utilities("-#{$bp-name}");
  }
}