.input--datepicker {
  /* Base input styles from CSS-Zero */
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--rounded-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  padding: var(--size-2) var(--size-3);
  width: 100%;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.input--datepicker:hover {
  border-color: var(--color-border-dark);
}

.input--datepicker:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
  outline: none;
}

/* Style the calendar icon */
.input--datepicker::-webkit-calendar-picker-indicator {
  background-color: transparent;
  cursor: pointer;
  filter: var(--color-text-subtle);
  padding: var(--size-1);
}

.input--datepicker::-webkit-calendar-picker-indicator:hover {
  filter: var(--color-text);
}

/* Style the datetime-local input on mobile */
@media (max-width: 640px) {
  .input--datepicker {
    font-size: var(--text-base);
    padding: var(--size-3);
  }
}