$props: (
  (
    prop: margin,
    abbrev: mmui-m,
  ),
  (
    prop: padding,
    abbrev: mmui-p,
  )
);

$spacers: (
  (
    size: 1,
    length: 1rem,
  ),
  (
    size: 2,
    length: 2rem,
  ),
  (
    size: 3,
    length: 3rem,
  ),
  (
    size: 4,
    length: 4rem,
  ),
  (
    size: 5,
    length: 5rem,
  ),
  (
    size: 6,
    length: 6rem,
  ),
  (
    size: 7,
    length: 7rem,
  ),
  (
    size: 8,
    length: 8rem,
  ),
  (
    size: 9,
    length: 9rem,
  ),
  (
    size: 10,
    length: 10rem,
  )
);

@each $prop_element in $props {
  $prop: map-get($prop_element, prop);
  $abbrev: map-get($prop_element, abbrev);

  @each $spacer in $spacers {
    $size: map-get($spacer, size);
    $length: map-get($spacer, length);

    .#{$abbrev}t-#{$size} {
      #{$prop}-top: $length !important;
    }
    .#{$abbrev}r-#{$size} {
      #{$prop}-right: $length !important;
    }
    .#{$abbrev}b-#{$size} {
      #{$prop}-bottom: $length !important;
    }
    .#{$abbrev}l-#{$size} {
      #{$prop}-left: $length !important;
    }
  }
}
