@mixin createSpacing($type) {
  $directions: all, v, h, top, right, bottom, left;
  $sizes: ((z, 0px), (xs, 6px), (sm, 12px), (md, 24px), (lg, 36px), (xl, 50px));

  @each $direction in $directions {
    @each $size, $pixel in $sizes {
      .#{$type}-#{$direction}-#{$size} {
        @if $direction == all {
          #{$type}: $pixel;
        } @else if $direction == v {
          #{$type}-top: $pixel;
          #{$type}-bottom: $pixel;
        } @else if $direction == h {
          #{$type}-right: $pixel;
          #{$type}-left: $pixel;
        } @else if $direction == top {
          #{$type}-top: $pixel;
        } @else if $direction == right {
          #{$type}-right: $pixel;
        } @else if $direction == bottom {
          #{$type}-bottom: $pixel;
        } @else if $direction == left {
          #{$type}-left: $pixel;
        }
      }
    }
  }
}

@include createSpacing(margin);
@include createSpacing(padding);


.text-line-bg {

  line-height: 2em;

}