.number-input-base {
  height: 4.6rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: var(--hs-border-dark);
  border-radius: var(--hs-radius);
  color: var(--hs-color-input-fg);
  background-color: var(--hs-color-input-bg);
  gap: var(--hs-spacing-small);
  font-family: inherit;
  font-size: 1.4rem;
  transition-property: color, border-color, background-color;
  transition-duration: var(--hs-transitions-duration-base);
  transition-timing-function: var(--hs-transitions-easing);
}

.number-input-base--disabled {
  color: inherit;
  background-color: var(--hs-color-input-accent);
}

.number-input-base:focus-within {
  border-color: var(--hs-color-input-highlight);
}

.number-input-base__button {
  border: none;
  margin: 0;
  padding: 0 var(--hs-spacing-base);
  background: transparent;
}

.number-input-base .number-input-base__input {
  width: 32px;
  height: 100%;
  outline: 0;
  border: none;
  border-radius: inherit;
  font-family: inherit;
  font-size: inherit;
  background: inherit;
  text-align: center;
  appearance: textfield;
}

.number-input-base .number-input-base__input::-webkit-outer-spin-button,
.number-input-base .number-input-base__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}