<pre class="mdl-code">{**
 *The classes are named using the format .p{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
 *
 *
 * Where sides is one of:
 *
 *    t - for classes that set padding-top
 *    b - for classes that set padding-bottom
 *    l - for classes that set padding-left
 *    r - for classes that set padding-right
 *    x - for classes that set both *-left and *-right
 *    y - for classes that set both *-top and *-bottom
 *    blank - for classes that set a padding on all 4 sides of the element
 *
 * Where size is one of:
 *
 *    0 - for classes that eliminate the padding or padding by setting it to 0
 *    1 - (by default) for classes that set the padding to $spacer * .25
 *    2 - (by default) for classes that set the padding to $spacer * .5
 *    3 - (by default) for classes that set the padding to $spacer
 *    4 - (by default) for classes that set the padding to $spacer * 2
 *    25 - (by default) for classes that set the padding to 25% of width
 *    50 - (by default) for classes that set the padding to 50% of width
 *    75 - (by default) for classes that set the padding to 75% of width
 *    100 - (by default) for classes that set the padding to 100% of width
 *
 * $spacer value could be redefine by $spacer variable in vars.scss.
 *}</pre>

 <p><strong>How it works</strong></p>

 <p>Assign responsive-friendly <code>padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code>.25rem</code> to <code>3rem</code>.</p>

 <p><strong>Notation</strong></p>

 <p>Spacing utilities that apply to all breakpoints, from <code>xs</code> to <code>xl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code>min-width: 0</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>

 <p n:syntax="off">The classes are named using the format <code>{property}{sides}-{size}</code> for <code>xs</code> and <code>{property}{sides}-{breakpoint}-{size}</code> for <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>.</p>

 <p>Where property is one of: <strong>p - for classes that set padding</strong></p>

 <p>Where <strong>sides</strong> is one of:</p>

 <ul>
    <li><code>t</code> - for classes that set <code>padding-top</code></li>
    <li><code>b</code> - for classes that set <code>padding-bottom</code></li>
    <li><code>l</code> - for classes that set <code>padding-left</code></li>
    <li><code>r</code> - for classes that set <code>padding-right</code></li>
    <li><code>x</code> - for classes that set both <code>*-left</code> and <code>*-right</code></li>
    <li><code>y</code> - for classes that set both <code>*-top</code> and <code>*-bottom</code></li>
    <li>blank - for classes that set a <code>padding</code> or <code>padding</code> on all 4 sides of the element</li>
</ul>

<p>Where <strong>size</strong> is one of:</p>

<ul>
    <li><code>0</code> - for classes that eliminate the <code>padding</code> by setting it to <code>0</code></li>
    <li><code>1</code> - (by default) for classes that set the <code>padding</code> to <code>$spacer * .25</code></li>
    <li><code>2</code> - (by default) for classes that set the <code>padding</code> to <code>$spacer * .5</code></li>
    <li><code>3</code> - (by default) for classes that set the <code>padding</code> to <code>$spacer</code></li>
    <li><code>4</code> - (by default) for classes that set the <code>padding</code> to <code>$spacer * 1.5</code></li>
    <li><code>5</code> - (by default) for classes that set the <code>padding</code> to <code>$spacer * 3</code></li>
    <li><code>auto</code> - for classes that set the <code>padding</code> to auto</li>
</ul>

<p>(You can add more sizes by adding entries to the <code>$spacers</code> Sass map variable.)</p>

<p><strong>Example</strong></p>

<p>Here are some representative examples of these classes:</p>

<pre class="mdl-code">
.mt-0 {
    padding-top: 0 !important;
}
    
.ml-1 {
    padding-left: ($spacer * .25) !important;
}
    
.px-2 {
    padding-left: ($spacer * .5) !important;
    padding-right: ($spacer * .5) !important;
}
    
.p-3 {
    padding: $spacer !important;
}
</pre>

<p></p>

<div class="bg-green pt-1">pt-1</div>
<div class="bg-orange py-1">py-1</div>
<div class="bg-red pb-1">pb-1</div>

<hr>

<div class="bg-green d-inline-block pl-1">pl-1</div>
<div class="bg-orange d-inline-block px-1">px-1</div>
<div class="bg-red d-inline-block pr-1">pr-1</div>

// stylelint-disable declaration-no-important

// Margin and Padding

@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, $length in $spacers {
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .#{$abbrev}t#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-top: $length !important;
        }
        .#{$abbrev}r#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-right: $length !important;
        }
        .#{$abbrev}b#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-bottom: $length !important;
        }
        .#{$abbrev}l#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-left: $length !important;
        }
      }
    }

    // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
    @each $size, $length in $spacers {
      @if $size != 0 {
        .m#{$infix}-n#{$size} { margin: -$length !important; }
        .mt#{$infix}-n#{$size},
        .my#{$infix}-n#{$size} {
          margin-top: -$length !important;
        }
        .mr#{$infix}-n#{$size},
        .mx#{$infix}-n#{$size} {
          margin-right: -$length !important;
        }
        .mb#{$infix}-n#{$size},
        .my#{$infix}-n#{$size} {
          margin-bottom: -$length !important;
        }
        .ml#{$infix}-n#{$size},
        .mx#{$infix}-n#{$size} {
          margin-left: -$length !important;
        }
      }
    }

    // Some special margin utils
    .m#{$infix}-auto { margin: auto !important; }
    .mt#{$infix}-auto,
    .my#{$infix}-auto {
      margin-top: auto !important;
    }
    .mr#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-right: auto !important;
    }
    .mb#{$infix}-auto,
    .my#{$infix}-auto {
      margin-bottom: auto !important;
    }
    .ml#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-left: auto !important;
    }
  }
}