// Utilities :: Spacings

$fabric-spacing-directions: (
  null: null,
  '-top': '-top',
  '-right': '-right',
  '-bottom': '-bottom',
  '-left': '-left',
  '-horizontal': '-left' '-right',
  '-vertical': '-top' '-bottom',
) !default;

$fabric-spacing-properties: (
  'padding': 'padding',
  'margin': 'margin',
) !default;

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

@each $property-namespace, $property in $fabric-spacing-properties {
  @each $direction-namespace, $direction-rules in $fabric-spacing-directions {
    @each $size-namespace, $size in $fabric-spacing-sizes {
      .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace} {
        @each $direction in $direction-rules {
          #{$property}#{$direction}: $size !important;
        }
      }
    }
  }
}

.u-margin-right-none\@mobile {
  @include mq($until: city) {
    margin-right: 0 !important;
  }
}

.u-margin-bottom\@mobile {
  @include mq($until: city) {
    margin-bottom: $fabric-global-spacing-unit !important;
  }
}

.u-padding\@mobile {
  @include mq($until: city) {
    padding: $fabric-global-spacing-unit !important;
  }
}

.u-padding-none\@mobile {
  @include mq($until: city) {
    padding: 0 !important;
  }
}