@mixin spacing-number($i, $position, $type) {
  @if ($i == 0) {
    #{$type}-#{$position}: 0rem !important;
  }
  @if ($i == 1) {
    #{$type}-#{$position}: 0.25rem !important;
  }
  @if ($i == 2) {
    #{$type}-#{$position}: 0.5rem !important;
  }
  @if ($i == 3) {
    #{$type}-#{$position}: 1rem !important;
  }
  @if ($i == 4) {
    #{$type}-#{$position}: 1.5rem !important;
  }
  @if ($i == 5) {
    #{$type}-#{$position}: 3rem !important;
  }
  @if ($i == auto) {
    #{$type}-#{$position}: auto !important;
  }
}

@mixin spacing-number-vertical($i, $type) {
  @if ($i == 0) {
    #{$type}-top: 0rem !important;
    #{$type}-bottom: 0rem !important;
  }
  @if ($i == 1) {
    #{$type}-top: 0.25rem !important;
    #{$type}-bottom: 0.25rem !important;
  }
  @if ($i == 2) {
    #{$type}-top: 0.5rem !important;
    #{$type}-bottom: 0.5rem !important;
  }
  @if ($i == 3) {
    #{$type}-top: 1rem !important;
    #{$type}-bottom: 1rem !important;
  }
  @if ($i == 4) {
    #{$type}-top: 1.5rem !important;
    #{$type}-bottom: 1.5rem !important;
  }
  @if ($i == 5) {
    #{$type}-top: 3rem !important;
    #{$type}-bottom: 3rem !important;
  }
  @if ($i == auto) {
    #{$type}-top: auto !important;
    #{$type}-bottom: auto !important;
  }
}

@mixin spacing-number-horizontal($i, $type) {
  @if ($i == 0) {
    #{$type}-left: 0rem !important;
    #{$type}-right: 0rem !important;
  }
  @if ($i == 1) {
    #{$type}-left: 0.25rem !important;
    #{$type}-right: 0.25rem !important;
  }
  @if ($i == 2) {
    #{$type}-left: 0.5rem !important;
    #{$type}-right: 0.5rem !important;
  }
  @if ($i == 3) {
    #{$type}-left: 1rem !important;
    #{$type}-right: 1rem !important;
  }
  @if ($i == 4) {
    #{$type}-left: 1.5rem !important;
    #{$type}-right: 1.5rem !important;
  }
  @if ($i == 5) {
    #{$type}-left: 3rem !important;
    #{$type}-right: 3rem !important;
  }
  @if ($i == auto) {
    #{$type}-left: auto !important;
    #{$type}-right: auto !important;
  }
}