/*
from: https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_spacing.scss
*/

// @include include-spacers
@mixin include-spacers {
  @at-root {
    $spacer: 1rem !default;
    $spacer-x: $spacer !default;
    $spacer-y: $spacer !default;
    $spacers: (
      0: (
        x: 0,
        y: 0
      ),
      1: (
        x: ($spacer-x * .25),
        y: ($spacer-y * .25)
      ),
      2: (
        x: ($spacer-x * .5),
        y: ($spacer-y * .5)
      ),
      3: (
        x: $spacer-x,
        y: $spacer-y
      ),
      4: (
        x: ($spacer-x * 1.5),
        y: ($spacer-y * 1.5)
      ),
      5: (
        x: ($spacer-x * 3),
        y: ($spacer-y * 3)
      )
    ) !default;

    @each $breakpoint in map-keys($grid-breakpoints) {
      @include breakpoint-up($breakpoint) {

        @each $prop, $abbrev in (margin: m, padding: p) {
          @each $size, $lengths in $spacers {
            $length-x: $lengths;
            $length-y: $lengths;

            .#{$abbrev}-#{$size}  { #{$prop}: $length-y $length-x !important; }
            .#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
            .#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
            .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
            .#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; }
            .#{$abbrev}x-#{$size} {
              #{$prop}-right: $length-x !important;
              #{$prop}-left:  $length-x !important;
            }
            .#{$abbrev}y-#{$size} {
              #{$prop}-top:    $length-y !important;
              #{$prop}-bottom: $length-y !important;
            }
          }
        }

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