//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Margin classes
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

.m {
  &-auto {
    margin: auto;
  }
  &-0 {
    margin: 0;
  }
  &-1 {
    margin: var(--sl-spacing-xxx-small);
  }
  &-2 {
    margin: var(--sl-spacing-xx-small);
  }
  &-3 {
    margin: var(--sl-spacing-x-small);
  }
  &-4 {
    margin: var(--sl-spacing-small);
  }
  &-5 {
    margin: var(--sl-spacing-medium);
  }
  &-6 {
    margin: var(--sl-spacing-large);
  }
  &-7 {
    margin: var(--sl-spacing-xx-large);
  }
  &-8 {
    margin: var(--sl-spacing-xxx-large);
  }
  &-9 {
    margin: var(--sl-spacing-4x-large);
  }
  &x {
    &-auto {
      margin-left: auto;
      margin-right: auto;
    }
    &-0 {
      margin-left: 0;
      margin-right: 0;
    }
    &-1 {
      margin-left: var(--sl-spacing-xxx-small);
      margin-right: var(--sl-spacing-xxx-small);
    }
    &-2 {
      margin-left: var(--sl-spacing-xx-small);
      margin-right: var(--sl-spacing-xx-small);
    }
    &-3 {
      margin-left: var(--sl-spacing-x-small);
      margin-right: var(--sl-spacing-x-small);
    }
    &-4 {
      margin-left: var(--sl-spacing-small);
      margin-right: var(--sl-spacing-small);
    }
    &-5 {
      margin-left: var(--sl-spacing-medium);
      margin-right: var(--sl-spacing-medium);
    }
    &-6 {
      margin-left: var(--sl-spacing-large);
      margin-right: var(--sl-spacing-large);
    }
    &-7 {
      margin-left: var(--sl-spacing-xx-large);
      margin-right: var(--sl-spacing-xx-large);
    }
    &-8 {
      margin-left: var(--sl-spacing-xxx-large);
      margin-right: var(--sl-spacing-xxx-large);
    }
    &-9 {
      margin-left: var(--sl-spacing-4x-large);
      margin-right: var(--sl-spacing-4x-large);
    }
  }
  &y {
    &-auto {
      margin-top: auto;
      margin-bottom: auto;
    }
    &-0 {
      margin-top: 0;
      margin-bottom: 0;
    }
    &-1 {
      margin-top: var(--sl-spacing-xxx-small);
      margin-bottom: var(--sl-spacing-xxx-small);
    }
    &-2 {
      margin-top: var(--sl-spacing-xx-small);
      margin-bottom: var(--sl-spacing-xx-small);
    }
    &-3 {
      margin-top: var(--sl-spacing-x-small);
      margin-bottom: var(--sl-spacing-x-small);
    }
    &-4 {
      margin-top: var(--sl-spacing-small);
      margin-bottom: var(--sl-spacing-small);
    }
    &-5 {
      margin-top: var(--sl-spacing-medium);
      margin-bottom: var(--sl-spacing-medium);
    }
    &-6 {
      margin-top: var(--sl-spacing-large);
      margin-bottom: var(--sl-spacing-large);
    }
    &-7 {
      margin-top: var(--sl-spacing-xx-large);
      margin-bottom: var(--sl-spacing-xx-large);
    }
    &-8 {
      margin-top: var(--sl-spacing-xxx-large);
      margin-bottom: var(--sl-spacing-xxx-large);
    }
    &-9 {
      margin-top: var(--sl-spacing-4x-large);
      margin-bottom: var(--sl-spacing-4x-large);
    }
  }
}

$directions: top t, bottom b, left l, right r;

@each $name, $direction in $directions {
  .m#{$direction} {
    &-auto {
      margin-#{$name}: auto;
    }
    &-0 {
      margin-#{$name}: 0;
    }
    &-1 {
      margin-#{$name}: var(--sl-spacing-xxx-small);
    }
    &-2 {
      margin-#{$name}: var(--sl-spacing-xx-small);
    }
    &-3 {
      margin-#{$name}: var(--sl-spacing-x-small);
    }
    &-4 {
      margin-#{$name}: var(--sl-spacing-small);
    }
    &-5 {
      margin-#{$name}: var(--sl-spacing-medium);
    }
    &-6 {
      margin-#{$name}: var(--sl-spacing-large);
    }
    &-7 {
      margin-#{$name}: var(--sl-spacing-xx-large);
    }
    &-8 {
      margin-#{$name}: var(--sl-spacing-xxx-large);
    }
    &-9 {
      margin-#{$name}: var(--sl-spacing-4x-large);
    }
  }
}