/* ==========================================================================
   UTILITIES / #SPACING
   ========================================================================== */

/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left-large {}
 *   .u-margin-right-small {}
 *   .u-padding-all {}
 */

/* Spacing utilities will override any matching property declarations */

$global-spacing-directions: (
  null,
  -top,
  -right,
  -bottom,
  -left,
);

$global-spacing-properties: (
  padding,
  margin
);

$global-spacing-sizes: (
  null: 20px,
  -tiny: 5px,
  -small: 10px,
  -large: 30px,
) !default;

@each $property in $global-spacing-properties {
  @each $direction in $global-spacing-directions {

    // This is a bit nasty… If we have a `null` direction, the implication is that
    // we want to use the respective property on all sides (TRBL). Accordingly,
    // create a string of `-all` to use in our class name.
    $all: null;

    @if ($direction == null) {
      $all: -all;
    }

    @each $size, $value in $global-spacing-sizes {
      .u-#{$property}#{$direction}#{$all}#{$size} {
        #{$property}#{$direction}: $value !important;
      }
    }

    .u-#{$property}#{$direction}#{$all}-none {
      #{$property}#{$direction}: 0 !important;
    }
  }

}