.input-number-container {
  --height: 2rem;
  --padding: 5px;
  --border-size: 1px;
  position: relative;
  height: var(--height);
  flex-shrink: 0;
}

.input-number-container input[type="number"] {
  width: calc(100% - (var(--padding) + var(--border-size)) * 2);
}

.input-number-container input {
  padding: var(--padding);
  height: calc(var(--height) - var(--padding) * 2 - var(--border-size) * 2);
}

.input-number-buttons-container {
  position: absolute;
  right: 0.5rem;
  top: 0;
  display: flex;
  justify-content: center;
  height: 100%;
  flex-direction: column;
}

.input-number-button {
  height: 25%;
  width: 0.5rem;
  padding: 0.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  font-size: calc(var(--height) / 2);
}