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

/**
 * Utility classes to put specific spacing values onto elements, overriding any
 * existing matching property declarations
 */

// Settings
// ==============================================

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

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

$global-spacing-sizes: (
  null: $global-spacing-unit,
  -tiny: $global-spacing-unit-tiny,
  -small: $global-spacing-unit-small,
  -large: $global-spacing-unit-large,
  -x-large: $global-spacing-unit-x-large,
  -none: 0,
) !default;

// Tools (Private / Framework Only)
// ==============================================

@mixin _global-spacing-selector ($property, $direction, $size) {
  // If we have a `null` direction, the implication is that we want to use the
  // respective property on "all" sides.
  // This can be used as either `.u-margin-all` or the preferred
  // sky-toolkit@3.0 suffix-less syntax `.u-margin`.
  @if ($direction == null) {
    .u-#{$property}#{$size},
    .u-#{$property}-all#{$size} {
      @content;
    }
  } @else {
    .u-#{$property}#{$direction}#{$size} {
      @content;
    }
  }
}

@mixin _global-spacing-declaration ($property, $direction, $value) {
  #{$property}#{$direction}: $value !important;
}

// Base
// ==============================================

// The below loop will generate us a suite of classes:
//   .u-padding, .u-padding-all {}
//   .u-margin-top {}
//   .u-padding-left-large {}
//   .u-margin-right-small {}

@each $property in $global-spacing-properties {
  @each $direction-key, $direction-value in $global-spacing-directions {
    @each $size-key, $size-value in $global-spacing-sizes {
      @include _global-spacing-selector($property, $direction-key, $size-key) {
        // If the `$direction-key` has nested values, loop through them too
        @if type-of($direction-value) == list {
          @each $direction in $direction-value {
            @include _global-spacing-declaration($property, $direction, $size-value);
          }
        } @else {
          @include _global-spacing-declaration($property, $direction-key, $size-value);
        }
      }
    }
  }
}