.input {
  all: unset;
  width: 60px;
  padding: 0 0.2rem;
  text-align: center;
}

.input:hover {
  background-color: rgba(var(--background-rgb), 0.5);
}

.input:focus-within {
  outline: none;
  background-color: rgba(var(--background-rgb), 0.9);
}

@media (prefers-color-scheme: dark) {
  .input:hover {
    background-color: rgba(var(--foreground-rgb), 0.1);
  }

  .input:focus-within {
    background-color: rgba(var(--foreground-rgb), 0.2);
  }
}