// Space

.bz-space-reset {
  margin: 0;
  padding: 0;
}

.bz-space {
  &--reset {
    margin: 0;
    padding: 0;
  }

  &--stack-xs {
    margin-bottom: $bz-space-stack-xs;
  }

  &--stack-s {
    margin-bottom: $bz-space-stack-s;
  }

  &--stack-m {
    margin-bottom: $bz-space-stack-m;
  }

  &--stack-l {
    margin-bottom: $bz-space-stack-l;
  }

  &--stack-xl {
    margin-bottom: $bz-space-stack-xl;
  }

  &--inline-xs {
    margin-right: $bz-space-inline-xs;
  }

  &--inline-s {
    margin-right: $bz-space-inline-s;
  }

  &--inline-m {
    margin-right: $bz-space-inline-m;
  }

  &--inline-l {
    margin-right: $bz-space-inline-l;
  }

  &--inline-xl {
    margin-right: $bz-space-inline-xl;
  }

  &--inset-xs {
    padding: $bz-space-inset-xs;
  }

  &--inset-s {
    padding: $bz-space-inset-s;
  }

  &--inset-m {
    padding: $bz-space-inset-m;
  }

  &--inset-l {
    padding: $bz-space-inset-l;
  }

  &--inset-xl {
    padding: $bz-space-inset-xl;
  }

  &--inset-squish-xs {
    padding: $bz-space-inset-squish-xs;
  }

  &--inset-squish-s {
    padding: $bz-space-inset-squish-s;
  }

  &--inset-squish-m {
    padding: $bz-space-inset-squish-m;
  }

  &--inset-squish-l {
    padding: $bz-space-inset-squish-l;
  }

}

[dir=rtl] {
  .bz-space {
    &--inline-xs {
      margin-left: $bz-space-inline-xs;
      margin-right: 0;
    }

    &--inline-s {
      margin-left: $bz-space-inline-s;
      margin-right: 0;
    }

    &--inline-m {
      margin-left: $bz-space-inline-m;
      margin-right: 0;
    }

    &--inline-l {
      margin-left: $bz-space-inline-l;
      margin-right: 0;
    }

    &--inline-xl {
      margin-left: $bz-space-inline-xl;
      margin-right: 0;
    }
  }
}

@media (max-width: 480px) {
  .bz-form-item--display-reversed {
    .bz-space {
      &--stack-xs {
        margin-bottom: 0;
        margin-top: $bz-space-stack-xs;
      }

      &--stack-s {
        margin-bottom: 0;
        margin-top: $bz-space-stack-s;
      }

      &--stack-m {
        margin-bottom: 0;
        margin-top: $bz-space-stack-m;
      }

      &--stack-l {
        margin-bottom: 0;
        margin-top: $bz-space-stack-l;
      }

      &--stack-xl {
        margin-bottom: 0;
        margin-top: $bz-space-stack-xl;
      }
    }
  }
}