// -----------------------------------------------------------------------------
// Spacing utility
//
// ->  Utility classes to put specific spacing values onto elements, based on the
//     sizing units defined in `$dp-size-units`. The below loop will generate
//     a suite of classes like:
// 
//     .u-margin-top {}
//     .u-padding-left-large {}
//     .u-margin-right-small {}
//     .u-padding {}
//
// -----------------------------------------------------------------------------

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

$dp-spacing-properties: (
  'padding',
  'margin'
);

@each $property in $dp-spacing-properties {
  @each $direction in $dp-spacing-directions {
    .u-#{$property}#{$direction} {
      #{$property}#{$direction}: $dp-room !important;
    }
    
    @each $size, $value in $dp-size-units {
      .u-#{$property}#{$direction}-#{$size} {
        #{$property}#{$direction}: dp-spacing($size) !important;
      }
    }
  }
}