<div class="counter">
  <button commandfor="num" command="step-down">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
    </svg>

    <span class="sr-only">Decrease number</span>
  </button>
  <input type="number" min="10" max="100" step="5" id="num" value="10">
  <button commandfor="num" id="btn" command="step-up">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
    </svg>

    <span class="sr-only">Increase number</span>
  </button>
</div>

:root {
  --light: 10;
}

::-webkit-inner-spin-button {
  display: none !important;
}

input[type="number"] {
  -moz-appearance: textfield;
  min-width: 150px;
  height: 100px;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

.counter {
  display: flex;
}

button {
  background: hsl(200 40% 50%);
  border: none;
  padding: 20px;
  border-radius: 0.4rem 0 0 0.4rem;
  cursor: pointer;
  transition: background 0.5s;
  &:is(:hover, :focus) {
    background: hsl(200 40% 70%);
  }
  &:nth-of-type(2) {
    border-radius: 0 0.4rem 0.4rem 0;
  }
  svg {
    width: 30px;
    aspect-ratio: 1;
  }
}

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

body {
  --lightness: calc(var(--light) * 1%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-height: 100vh;
  background-image: conic-gradient(
    from 210deg at 49% -25%,
    black 83% 83%,
    hsl(51, 100%, var(--lightness)) -49% -49%
  );
  background-size: cover;
}

const numberInput = document.querySelector('input[type="number"]');
const rootElement = document.documentElement;

numberInput.addEventListener("command", () => {
  //Would be handy if a change event would work for this
  const newValue = numberInput.value;
  console.log(newValue);
  rootElement.style.setProperty("--light", newValue);
});