.numberinput {
  --size: 4rem;
  --button-base-color: pink;
  --button-text-color: green;
  --button-shadow-color: olive;
  --input-base-color: gray;
  --input-text-color: blue;
  --input-border-color: red;
}
.numberinput {
  display: flex;
  gap: calc(var(--size) / 10);
}
.numberinput > button,
.numberinput > input {
  display: block;
  height: var(--size);
  border-radius: calc(var(--size) / 10);
}
.numberinput > button {
  width: var(--size);
  box-shadow: inset 0 calc(var(--size) / 10 * -1) 0 0 var(--button-shadow-color);
  background-color: var(--button-base-color);
  color: var(--button-text-color);
}
.numberinput > button > i {
  vertical-align: calc(var(--size) / 10);
  line-height: 1;
  font-size: calc(var(--size) / 1.5);
}
.numberinput > button.pressed {
  box-shadow: none;
  padding-bottom: unset;
  transform: translateY(calc(var(--size) / 10));
  height: calc(var(--size) - (var(--size) / 10));
}
.numberinput > input {
  width: calc(var(--size) * 2);
  border: calc(var(--size) / 10) solid var(--input-border-color);
  text-align: center;
  line-height: 1;
  font-size: calc(var(--size) / 1.5);
  font-weight: bold;
  background-color: var(--input-base-color);
  color: var(--input-text-color);
}