.input {
  appearance: none;
  transition-property:
    background-color, border-color, color, fill, stroke, opacity, box-shadow,
    transform;
  transition-duration: 200ms;
}

input[value=""]:where([type="date"], [type="time"], [type="datetime-local"]) {
  background-color: white;
}

.input.hideControls {
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}