// Spacing Shorthand placeholder
// @source - https://v4-alpha.getbootstrap.com/utilities/spacing/
// ----------------------------------


// Margin and Padding
@each $prop, $abbrev in (margin: m, padding: p) {
  @each $size, $lengths in $spacers {
    $length-x: map-get($lengths, x);
    $length-y: map-get($lengths, y);
    $symbols: (positive: null, negative: '-');

    @each $symbol, $short in $symbols {
      %#{$short}#{$abbrev}-#{$size} {
        #{$prop}: #{$short}#{$length-y} #{$short}#{$length-x};
      }
      %#{$short}#{$abbrev}t-#{$size} {
        #{$prop}-top: #{$short}#{$length-y};
      }
      %#{$short}#{$abbrev}r-#{$size} {
        #{$prop}-right: #{$short}#{$length-x};
      }
      %#{$short}#{$abbrev}b-#{$size} {
        #{$prop}-bottom: #{$short}#{$length-y};
      }
      %#{$short}#{$abbrev}l-#{$size} {
        #{$prop}-left: #{$short}#{$length-x};
      }
      %#{$short}#{$abbrev}x-#{$size} {
        #{$prop}-right: #{$short}#{$length-x};
        #{$prop}-left: #{$short}#{$length-x};
      }
      %#{$short}#{$abbrev}y-#{$size} {
        #{$prop}-top: #{$short}#{$length-y};
        #{$prop}-bottom: #{$short}#{$length-y};
      }
    }
  }
}

// Some special margin utils
%m-auto {
  margin: auto;
}

%mt-auto {
  margin-top: auto;
}

%mr-auto {
  margin-right: auto;
}

%mb-auto {
  margin-bottom: auto;
}

%ml-auto {
  margin-left: auto;
}

%mx-auto {
  margin-right: auto;
  margin-left: auto;
}

%my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
