/* A calendar block whose appointment MD Assistant is recording, and the appointment's item
   on the patient's profile. The block's corner already holds the invalid-address dot, so
   the recording shows as a ring around the whole block (on the profile, around the item's
   status avatar):
   a red pulse while live, in the patient banner's red, and a steady ring when the
   connection is lost (amber) or the recording is paused (grey).

   The state lives on Appointments::LiveRecordingMarkerComponent, an empty span inside the
   block that the live-encounter-timer controller keeps current; the block reads it with
   :has(), so a broadcast only ever swaps that span and never the positioned block. */
.appointments--live-recording {
  display: none;
}

/* A thin red ring that holds, so the block reads as recording at a glance, with a wave
   spreading out from it. rgb(222 75 75) is --error-500, spelled out to fade it. */
@keyframes appointments--live-recording-pulse {
  0% {
    box-shadow: 0 0 0 1px rgb(222 75 75), 0 0 0 1px rgb(222 75 75 / 0.6);
  }
  70% {
    box-shadow: 0 0 0 1px rgb(222 75 75), 0 0 0 7px rgb(222 75 75 / 0);
  }
  100% {
    box-shadow: 0 0 0 1px rgb(222 75 75), 0 0 0 1px rgb(222 75 75 / 0);
  }
}

.weekly-schedule--appointment:has(> .appointments--live-recording:not([hidden]) > [data-state="live"]:not([hidden])) .weekly-schedule--appointment-inner,
.column-calendar--appointment:has(> .appointments--live-recording:not([hidden]) > [data-state="live"]:not([hidden])),
.appointment-list-item-wrapper:has(> .appointments--live-recording:not([hidden]) > [data-state="live"]:not([hidden])) .appointment-list-item--avatar-cluster .avatar {
  animation: appointments--live-recording-pulse 1.6s ease-out infinite;
}

.weekly-schedule--appointment:has(> .appointments--live-recording:not([hidden]) > [data-state="connection-lost"]:not([hidden])) .weekly-schedule--appointment-inner,
.column-calendar--appointment:has(> .appointments--live-recording:not([hidden]) > [data-state="connection-lost"]:not([hidden])),
.appointment-list-item-wrapper:has(> .appointments--live-recording:not([hidden]) > [data-state="connection-lost"]:not([hidden])) .appointment-list-item--avatar-cluster .avatar {
  box-shadow: 0 0 0 2px var(--warning-300);
}

.weekly-schedule--appointment:has(> .appointments--live-recording:not([hidden]) > [data-state="paused"]) .weekly-schedule--appointment-inner,
.column-calendar--appointment:has(> .appointments--live-recording:not([hidden]) > [data-state="paused"]),
.appointment-list-item-wrapper:has(> .appointments--live-recording:not([hidden]) > [data-state="paused"]) .appointment-list-item--avatar-cluster .avatar {
  box-shadow: 0 0 0 2px var(--neutral-400);
}

/* Motion off: the live ring holds still rather than pulsing. */
@media (prefers-reduced-motion: reduce) {
  .weekly-schedule--appointment:has(> .appointments--live-recording:not([hidden]) > [data-state="live"]:not([hidden])) .weekly-schedule--appointment-inner,
  .column-calendar--appointment:has(> .appointments--live-recording:not([hidden]) > [data-state="live"]:not([hidden])),
  .appointment-list-item-wrapper:has(> .appointments--live-recording:not([hidden]) > [data-state="live"]:not([hidden])) .appointment-list-item--avatar-cluster .avatar {
    animation: none;
    box-shadow: 0 0 0 2px var(--error-500);
  }
}