.ds-form-field-number {
  max-width: 33rem;
  position: relative;
  width: 100%;
}

.ds-form-field-number__button {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border-bottom: 0.5125rem solid transparent;
  border-left: 0.5125rem solid transparent;
  border-right: 0.5125rem solid transparent;
  border-top: 0;
  height: 0;
  outline: solid transparent;
  padding: 0;
  position: absolute;
  right: 0.9375rem;
  top: 0.5625rem;
  width: 0;
  &::before {
    border-bottom: 0.3125rem solid var(--ds-color-london-5);
    border-left: 0.3125rem solid transparent;
    border-right: 0.3125rem solid transparent;
    border-top: 0;
    content: '';
    height: 0;
    position: absolute;
    right: -0.325rem;
    top: 0.125rem;
    width: 0;
  }
  &:focus {
    border-bottom: 0.5125rem solid var(--ds-color-hong-kong-55);
  }
  &:disabled {
    border-bottom: 0.3125rem solid var(--ds-color-london-95);
    &::before {
      border-bottom: 0.3125rem solid var(--ds-color-london-70);
      top: 0.1rem;
    }
  }
}

.ds-form-field-number__button--down {
  border-bottom: 0;
  border-top: 0.5125rem solid transparent;
  top: 1.4375rem;
  &::before {
    border-bottom: 0;
    border-left: 0.3125rem solid transparent;
    border-right: 0.3125rem solid transparent;
    border-top: 0.3125rem solid var(--ds-color-london-5);
    right: -0.325rem;
    top: -0.45rem;
  }
  &:disabled {
    border-bottom: 0;
    border-top: 0.3125rem solid var(--ds-color-london-95);
    &::before {
      border-bottom: 0;
      border-top: 0.3125rem solid var(--ds-color-london-70);
      top: -0.2rem;
    }
  }
  &:focus {
    border-bottom: 0;
    border-top: 0.5125rem solid var(--ds-color-hong-kong-55);
  }
}

.ds-form-field-number--slim {
  .ds-form-field-number__button {
    top: 0.4375rem;
  }
  .ds-form-field-number__button--down {
    top: 1.3125rem;
  }
}

.ds-form-label + .ds-form-field-number,
.ds-form-helper-text + .ds-form-field-number {
  margin: 0.375rem 0 0 0;
}