/* Preserve the chosen hue, with one light gradient treatment across all colors. */
.calendar-event,
.calendar-draft-preview,
.calendar-selection {
  --event-ink: color-mix(in srgb, var(--event-color, #be36bf) 65%, #302333);
  --event-pale: color-mix(in srgb, var(--event-color, #be36bf) 9%, white);
  --event-soft: color-mix(in srgb, var(--event-color, #be36bf) 17%, white);
  --event-bright: var(--event-color, #be36bf);
  --event-deep: var(--event-color, #be36bf);
}
@supports (color: hsl(from red h s l)) {
  .calendar-event, .calendar-draft-preview, .calendar-selection {
    --event-ink: hsl(from var(--event-color, #be36bf) h s 33%);
    --event-bright: hsl(from var(--event-color, #be36bf) h calc(s * 1.4) 59%);
    --event-deep: hsl(from var(--event-color, #be36bf) h calc(s * 1.4) 52%);
  }
}
.calendar-event.confirmed,
.calendar-event.pending {
  border-radius: 3px;
  border-left: 2px solid var(--event-deep);
  color: var(--event-ink);
  background: linear-gradient(100deg, var(--event-pale), var(--event-soft));
  box-shadow: none;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.calendar-event.pending { border-style: dashed; border-left-style: solid; }
.calendar-event strong {
  font-family: var(--uc-font-text, sans-serif);
  font-weight: 600;
  letter-spacing: -.015em;
}
.calendar-event time { color: inherit; opacity: .78; }
.calendar-event:hover {
  box-shadow: inset 0 0 0 1px var(--event-soft);
}
.calendar-event.is-editing,
.calendar-event.touch-armed,
.calendar-event.selected,
.calendar-event.is-interacting.confirmed,
.calendar-event.is-interacting.pending {
  color: white;
  background: linear-gradient(100deg, var(--event-bright), var(--event-deep));
  border-left-color: var(--event-deep);
  box-shadow: none;
  opacity: 1;
  z-index: 5;
}
.calendar-event.is-interacting { transition: none; cursor: grabbing; }
.calendar-event:is(.is-editing, .touch-armed, .selected, .is-interacting) time { opacity: 1; }
.calendar-event:focus-visible {
  outline: 2px solid var(--event-ink);
  outline-offset: 2px;
}
.calendar-event .resize-handle::after { background: currentColor; }
.calendar-event.touch-armed .resize-handle {
  display: block;
  height: 16px;
  opacity: 1;
  color: inherit;
  touch-action: none;
}
.calendar-event.touch-armed .resize-handle::after { opacity: 1; }
.calendar-selection { --event-color: #be36bf; }
.calendar-draft-preview,
.calendar-selection {
  color: var(--event-ink);
  background: linear-gradient(100deg, var(--event-pale), var(--event-soft));
  border: 1px dashed var(--event-deep);
  border-left: 2px solid var(--event-deep);
  border-radius: 3px;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .calendar-event { transition: none; animation: none; }
}