@import "mixins/tools.mixins";

// format: .u-space-123
// 1 = [p]adding, [m]argin
// 2 = [a]ll, [t]op, [r]ight, [b]ottom, [l]eft, [h]orizontal-axis, [v]ertical-axis
// 3 = [n]one, [s]mall, [m]edium, [l]arge, [x]extra, [xl]extra-large, [xxl]extra-extra-large

$spaces: (
  n: 0,  // none
  s: rem(10), // small
  m: rem(20), // medium
  l: rem(30), // large
  x: rem(40), // extra
  xl: rem(50), // extra-large
  xxl: rem(60) // extra-extra-large
);

@each $key, $value in $spaces {
  // Top
  .u-space-mt#{$key} {
    margin-top: #{$value} !important;
  }
  .u-space-pt#{$key} {
    padding-top: #{$value} !important;
  }

  // Bottom
  .u-space-mb#{$key} {
    margin-bottom: #{$value} !important;
  }
  .u-space-pb#{$key} {
    padding-bottom: #{$value} !important;
  }

  // Right
  .u-space-mr#{$key} {
    margin-right: #{$value} !important;
  }
  .u-space-pr#{$key} {
    padding-right: #{$value} !important;
  }

  // Left
  .u-space-ml#{$key} {
    margin-left: #{$value} !important;
  }
  .u-space-pl#{$key} {
    padding-left: #{$value} !important;
  }

  // Vertical Axis
  .u-space-mv#{$key} {
    margin-top: #{$value} !important;
    margin-bottom: #{$value} !important;
  }
  .u-space-pv#{$key} {
    padding-top: #{$value} !important;
    padding-bottom: #{$value} !important;
  }

  // Horizontal Axis
  .u-space-mh#{$key} {
    margin-right: #{$value} !important;
    margin-left: #{$value} !important;
  }
  .u-space-ph#{$key} {
    padding-right: #{$value} !important;
    padding-left: #{$value} !important;
  }

  // All
  .u-space-ma#{$key} {
    margin-top: #{$value} !important;
    margin-bottom: #{$value} !important;
    margin-right: #{$value} !important;
    margin-left: #{$value} !important;
  }
  .u-space-pa#{$key} {
    padding-top: #{$value} !important;
    padding-bottom: #{$value} !important;
    padding-right: #{$value} !important;
    padding-left: #{$value} !important;
  }
}
