.analytics-custom-date-control {
  transition: opacity 0.16s ease;
}

.analytics-custom-date-control input {
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.analytics-range-form:not(.analytics-range-is-custom) .analytics-custom-date-control {
  opacity: 0.56;
}

.analytics-range-form:not(.analytics-range-is-custom) .analytics-custom-date-control input {
  border-color: #d7dbe1;
  background: #f1f3f5;
  color: var(--muted);
  cursor: pointer;
}

.analytics-range-form:not(.analytics-range-is-custom) .analytics-custom-date-control input:hover,
.analytics-range-form:not(.analytics-range-is-custom) .analytics-custom-date-control input:focus {
  border-color: var(--brand-red);
  background: var(--white);
  color: var(--charcoal);
  opacity: 1;
}

.analytics-range-form.analytics-range-is-custom .analytics-custom-date-control {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .analytics-custom-date-control,
  .analytics-custom-date-control input {
    transition: none;
  }
}