:root {
  --calendar-today-surface:#fff0c2;
  --calendar-today-ink:#704100;
  --event-planned-surface:#eaf2ff;
  --event-planned-ink:#164597;
  --event-ongoing-surface:#dbf5eb;
  --event-ongoing-ink:#075940;
  --event-completed-surface:#edf0f4;
  --event-completed-ink:#424f64;
  --event-cancelled-surface:#ffe8ec;
  --event-cancelled-ink:#951d36;
}

[data-theme=dark] {
  --calendar-today-surface:#4b350b;
  --calendar-today-ink:#ffe0a0;
  --event-planned-surface:#193761;
  --event-planned-ink:#c1dfff;
  --event-ongoing-surface:#124a3b;
  --event-ongoing-ink:#b8f7dd;
  --event-completed-surface:#293548;
  --event-completed-ink:#d7dfed;
  --event-cancelled-surface:#572334;
  --event-cancelled-ink:#ffd3df;
}

.event-state {
  --event-state-surface:var(--event-completed-surface);
  --event-state-ink:var(--event-completed-ink);
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: var(--event-state-surface);
  color: var(--event-state-ink);
  font: 600 15px/1.5 "Segoe UI", Arial, sans-serif;
  margin-bottom: 10px;
}

.event-state[data-event-state=planned] {
  --event-state-surface:var(--event-planned-surface);
  --event-state-ink:var(--event-planned-ink);
}

.event-state:is([data-event-state=ongoing], [data-event-state=started]) {
  --event-state-surface:var(--event-ongoing-surface);
  --event-state-ink:var(--event-ongoing-ink);
}

.event-state:is([data-event-state=cancelled], [data-event-state=invalid]) {
  --event-state-surface:var(--event-cancelled-surface);
  --event-state-ink:var(--event-cancelled-ink);
}