/**
 * 内外边距相关快捷样式类
 * @since 1.0.0
 * @version 1.0.0
 */

$ui-margin: namespace('m');
$ui-padding: namespace('p');

$ui-distance-map: (
  'auto': auto,
  '0': 0,
  '4': 4px,
  '8': 8px,
  '10': 10px,
  '12': 12px,
  '16': 16px,
  '20': 20px,
  '24': 24px,
  '32': 32px,
  '40': 40px,
  '48': 48px,
  '56': 56px,
  '64': 64px,
  '80': 80px,
);

/* ==========================================================================
    外边距相关
========================================================================== */

@each $key, $value in $ui-distance-map {
  .#{$ui-margin + $key} {
    margin: $value;
  }

  .#{$ui-margin + 'tb' + $key} {
    margin-top: $value;
    margin-bottom: $value;
  }

  .#{$ui-margin + 'lr' + $key} {
    margin-left: $value;
    margin-right: $value;
  }

  .#{$ui-margin + 't' + $key} {
    margin-top: $value;
  }

  .#{$ui-margin + 'b' + $key} {
    margin-bottom: $value;
  }

  .#{$ui-margin + 'l' + $key} {
    margin-left: $value;
  }

  .#{$ui-margin + 'r' + $key} {
    margin-right: $value;
  }
}

/* ==========================================================================
    内边距相关
========================================================================== */

@each $key, $value in $ui-distance-map {
  .#{$ui-padding + $key} {
    padding: $value;
  }

  .#{$ui-padding + 'tb' + $key} {
    padding-top: $value;
    padding-bottom: $value;
  }

  .#{$ui-padding + 'lr' + $key} {
    padding-left: $value;
    padding-right: $value;
  }

  .#{$ui-padding + 't' + $key} {
    padding-top: $value;
  }

  .#{$ui-padding + 'b' + $key} {
    padding-bottom: $value;
  }

  .#{$ui-padding + 'l' + $key} {
    padding-left: $value;
  }

  .#{$ui-padding + 'r' + $key} {
    padding-right: $value;
  }
}