//
// Spacing utilities
// Inspired by Bootstrap v4
// --------------------------------------------------

// Loop through the .spacing-utilities mixin per screen size
.spacing-utilities(~"");

@media (min-width: @screen-sm-min) {
  .spacing-utilities(-sm);
}

@media (min-width: @screen-md-min) {
  .spacing-utilities(-md);
}

@media (min-width: @screen-lg-min) {
  .spacing-utilities(-lg);
}


// Loop through the .make-spacing-utilities mixin per spacing size
.spacing-utilities(@screen-size) {
  .make-spacing-utilities(margin, m, @screen-size, 0, @spacer-0);
  .make-spacing-utilities(padding, p, @screen-size, 0, @spacer-0);
  .make-spacing-utilities(margin, m, @screen-size, 1, @spacer-1);
  .make-spacing-utilities(padding, p, @screen-size, 1, @spacer-1);
  .make-spacing-utilities(margin, m, @screen-size, 2, @spacer-2);
  .make-spacing-utilities(padding, p, @screen-size, 2, @spacer-2);
  .make-spacing-utilities(margin, m, @screen-size, 3, @spacer-3);
  .make-spacing-utilities(padding, p, @screen-size, 3, @spacer-3);
  .make-spacing-utilities(margin, m, @screen-size, 4, @spacer-4);
  .make-spacing-utilities(padding, p, @screen-size, 4, @spacer-4);
  .make-spacing-utilities(margin, m, @screen-size, 5, @spacer-5);
  .make-spacing-utilities(padding, p, @screen-size, 5, @spacer-5);
}


// Build up the class names and property values
// m = margin
// p = padding
// y = y axis or vertical (top and bottom)
// x = x axis or horizontal (left and right)
// t = top
// r = right
// b = bottom
// l = left
.make-spacing-utilities(@property, @abbrev, @screen-size, @spacing-name, @spacing-value) {
  & when (@property = margin)  {
    & when (@spacing-name = 0) {
      .m@{screen-size}-auto  { margin:        auto !important; }
      .mt@{screen-size}-auto { margin-top:    auto !important; }
      .mr@{screen-size}-auto { margin-right:  auto !important; }
      .mb@{screen-size}-auto { margin-bottom: auto !important; }
      .ml@{screen-size}-auto { margin-left:   auto !important; }
      .mx@{screen-size}-auto {
        margin-right: auto !important;
        margin-left:  auto !important;
      }
      .my@{screen-size}-auto  {
        margin-top:    auto !important;
        margin-bottom: auto !important;
      }
    }
  }
  .@{abbrev}@{screen-size}-@{spacing-name}  { @{property}:        @spacing-value !important; }
  .@{abbrev}t@{screen-size}-@{spacing-name} { @{property}-top:    @spacing-value !important; }
  .@{abbrev}r@{screen-size}-@{spacing-name} { @{property}-right:  @spacing-value !important; }
  .@{abbrev}b@{screen-size}-@{spacing-name} { @{property}-bottom: @spacing-value !important; }
  .@{abbrev}l@{screen-size}-@{spacing-name} { @{property}-left:   @spacing-value !important; }
  .@{abbrev}x@{screen-size}-@{spacing-name} {
    @{property}-right: @spacing-value !important;
    @{property}-left:  @spacing-value !important;
  }
  .@{abbrev}y@{screen-size}-@{spacing-name} {
    @{property}-top:    @spacing-value !important;
    @{property}-bottom: @spacing-value !important;
  }
}