/* ==========================================================================
 * Margin
 * ========================================================================== */

.mds-h-margin {
  @each $spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &-$(spacing) {
      margin: var(--spacing-$(spacing)) !important;
    }
  }

  @each $x-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &-x-$(x-spacing) {
      margin-left: var(--spacing-$(x-spacing)) !important;
      margin-right: var(--spacing-$(x-spacing)) !important;
    }
  }

  @each $y-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &-y-$(y-spacing) {
      margin-bottom: var(--spacing-$(y-spacing)) !important;
      margin-top: var(--spacing-$(y-spacing)) !important;
    }
  }

  @each $top-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &-top-$(top-spacing) {
      margin-top: var(--spacing-$(top-spacing)) !important;
    }
  }

  @each $right-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &-right-$(right-spacing) {
      margin-right: var(--spacing-$(right-spacing)) !important;
    }
  }

  @each $bottom-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &-bottom-$(bottom-spacing) {
      margin-bottom: var(--spacing-$(bottom-spacing)) !important;
    }
  }

  @each $left-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &-left-$(left-spacing) {
      margin-left: var(--spacing-$(left-spacing)) !important;
    }
  }
}