$spacings_static: (
  0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,
  21,22,23,24,
  26,27,28,29,
  31,32,33
);
@each $prop, $abbrev in (margin: m, padding: p) {
  @each $size in $spacings_static {
    // all
    .#{$abbrev}-#{$size} { #{$prop}: #{$size}px; }
    // top
    .#{$abbrev}t-#{$size} {
      #{$prop}-top: #{$size}px;
    }
    // right
    .#{$abbrev}r-#{$size} {
      #{$prop}-right: #{$size}px;
      [dir="rtl"] &{
        #{$prop}-right: 0;
        #{$prop}-left: #{$size}px;
      }
    }
    // bottom
    .#{$abbrev}b-#{$size} {
      #{$prop}-bottom: #{$size}px;
    }
    // left
    .#{$abbrev}l-#{$size} {
      #{$prop}-left: #{$size}px;
      [dir="rtl"] &{
        #{$prop}-left: 0;
        #{$prop}-right: #{$size}px;
      }
    }
    //left - right 
    .#{$abbrev}-lr-#{$size} {
      #{$prop}-left: #{$size}px;
      #{$prop}-right: #{$size}px;
    }
    // top - bottom 
    .#{$abbrev}-tb-#{$size} {
      #{$prop}-top: #{$size}px;
      #{$prop}-bottom: #{$size}px;
    }
  }
}
// Negative 
@each $prop, $abbrev in (margin: m) {
  @each $size in  $spacings_static {
    // all
    .#{$abbrev}-n#{$size} { #{$prop}: -#{$size}px; } // Negative
    // top
    .#{$abbrev}t-n#{$size} { // Negative
      #{$prop}-top: -#{$size}px;
    }
    // right
    .#{$abbrev}r-n#{$size} { // Negative
      #{$prop}-right: -#{$size}px;
      [dir="rtl"] &{
        //#{$prop}-right: inherit;
        #{$prop}-left: -#{$size}px;
      }
    }
    // bottom
    .#{$abbrev}b-n#{$size} { // Negative
      #{$prop}-bottom: -#{$size}px;
    }
    // left
    .#{$abbrev}l-n#{$size} {// Negative
      #{$prop}-left: -#{$size}px;
      [dir="rtl"] &{
        //#{$prop}-left: inherit;
        #{$prop}-right: -#{$size}px;
      }
    }
  }
}

$spacings: (20,25,30,35,
   40,45,50,55,60,65,70,75,80,85,90,100,105,110,115,120,130,140,150,160,170,180,190,200
);

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size in $spacings {
        // all
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: #{$size}px; }
        // top
        .#{$abbrev}t#{$infix}-#{$size} {
          #{$prop}-top: #{$size}px;
        }
        // right
        .#{$abbrev}r#{$infix}-#{$size} {
          #{$prop}-right: #{$size}px;
          [dir="rtl"] &{
            #{$prop}-right: 0;
            #{$prop}-left: #{$size}px;
          }
        }
        // bottom
        .#{$abbrev}b#{$infix}-#{$size} {
          #{$prop}-bottom: #{$size}px;
        }
        // left
        .#{$abbrev}l#{$infix}-#{$size} {
          #{$prop}-left: #{$size}px;
          [dir="rtl"] &{
            #{$prop}-left: 0;
            #{$prop}-right: #{$size}px;
          }
        }
        //left - right 
        .#{$abbrev}-lr#{$infix}-#{$size} {
          #{$prop}-left: #{$size}px;
          #{$prop}-right: #{$size}px;
        }
        // top - bottom 
        .#{$abbrev}-tb#{$infix}-#{$size} {
          #{$prop}-top: #{$size}px;
          #{$prop}-bottom: #{$size}px;
        }
        // auto
        .#{$abbrev}-lr#{$infix}-auto {
          #{$prop}-left: auto;
          #{$prop}-right: auto;
        }
      }
    }
    // Negative 
    @each $prop, $abbrev in (margin: m) {
      @each $size in  $spacings {
        // all
        .#{$abbrev}#{$infix}-n#{$size} { #{$prop}: -#{$size}px; } // Negative
        // top
        .#{$abbrev}t#{$infix}-n#{$size} { // Negative
          #{$prop}-top: -#{$size}px;
        }
        // right
        .#{$abbrev}r#{$infix}-n#{$size} { // Negative
          #{$prop}-right: -#{$size}px;
          [dir="rtl"] &{
            //#{$prop}-right: inherit;
            #{$prop}-left: -#{$size}px;
          }
        }
        // bottom
        .#{$abbrev}b#{$infix}-n#{$size} { // Negative
          #{$prop}-bottom: -#{$size}px;
        }
        // left
        .#{$abbrev}l#{$infix}-n#{$size} {// Negative
          #{$prop}-left: -#{$size}px;
          [dir="rtl"] &{
            //#{$prop}-left: inherit;
            #{$prop}-right: -#{$size}px;
          }
        }
      }
    }
    // Some special margin utils
    .m#{$infix}-auto { margin: auto; }
    .mt#{$infix}-auto,
    .my#{$infix}-auto {
      margin-top: auto;
    }
    .mr#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-right: auto;
    }
    .mb#{$infix}-auto,
    .my#{$infix}-auto {
      margin-bottom: auto;
    }
    .ml#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-left: auto;
      [dir="rtl"] &{
        margin-left: unset!important;
        margin-right: auto!important;
      }
    }
  }
}
.pb-last-0:last-child{
  padding-bottom: 0;
}