$spacing: (
  0: 0px,
  1: var(--spacing-2),
  2: var(--spacing-4),
  3: var(--spacing-8),
  4: var(--spacing-16),
  5: var(--spacing-24),
  6: var(--spacing-32),
  7: var(--spacing-48),
  8: var(--spacing-64),
  9: var(--spacing-96),
  10: var(--spacing-96),
);

@mixin spacing($size) {
  @each $key, $val in $spacing {
    // Margins
    .m#{ $size }-#{ $key } {
      margin: #{ $val }
    }

    .mb#{ $size }-#{ $key } {
      margin-bottom: #{ $val }
    }

    .mt#{ $size }-#{ $key } {
      margin-top: #{ $val }
    }

    .ml#{ $size }-#{ $key } {
      margin-left: #{ $val }
    }

    .mr#{ $size }-#{ $key } {
      margin-right: #{ $val }
    }

    .mx#{ $size }-#{ $key } {
      margin-left: #{ $val };
      margin-right: #{ $val };
    }

    .my#{ $size }-#{ $key } {
      margin-top: #{ $val };
      margin-bottom: #{ $val };
    }


    // Paddings
    .p#{ $size }-#{ $key } {
      padding: #{ $val }
    }

    .pb#{ $size }-#{ $key } {
      padding-bottom: #{ $val }
    }

    .pt#{ $size }-#{ $key } {
      padding-top: #{ $val }
    }

    .pl#{ $size }-#{ $key } {
      padding-left: #{ $val }
    }

    .pr#{ $size }-#{ $key } {
      padding-right: #{ $val }
    }

    .px#{ $size }-#{ $key } {
      padding-left: #{ $val };
      padding-right: #{ $val };
    }

    .py#{ $size }-#{ $key } {
      padding-top: #{ $val };
      padding-bottom: #{ $val };
    }
  }

  .mb#{ $size }-auto { margin-bottom: auto !important; }
  .mt#{ $size }-auto { margin-top: auto !important; }
  .my#{ $size }-auto {
    margin-bottom: auto !important;
    margin-top: auto !important;
  }
  .ml#{ $size }-auto { margin-left: auto !important; }
  .mr#{ $size }-auto { margin-right: auto !important; }
  .mx#{ $size }-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@include spacing("");

@include screen-sm() {
  @include spacing("-sm")
}

@include screen-md() {
  @include spacing("-md");
}

@include screen-lg() {
  @include spacing("-lg")
}
