/* CpStatusLight. The .cp-led from base.css with its required text. Off is a hollow light,
   so "off" and "on" also differ in shape, not only in colour. */

.cp-status-light {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
  font-family: var(--cp-font);
  font-size: var(--cp-text-caption);
  line-height: 1.3;
  color: var(--cp-ink);
}
.cp-status-light--sm { font-size: var(--cp-text-label); gap: var(--cp-space-1); }

.cp-status-light__led { width: 10px; height: 10px; }
.cp-status-light--sm .cp-status-light__led { width: 8px; height: 8px; }

.cp-status-light--off .cp-status-light__led {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--cp-ink-muted);
}
.cp-status-light--off .cp-status-light__text { color: var(--cp-ink-muted); }
.cp-status-light--error .cp-status-light__text { color: var(--cp-red-text); font-weight: var(--cp-weight-medium); }

.cp-status-light.is-pulsing .cp-status-light__led { animation: cp-led-pulse 1600ms ease-in-out infinite; }
@keyframes cp-led-pulse { 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  .cp-status-light.is-pulsing .cp-status-light__led { animation: none; }
}

@media (forced-colors: active) {
  .cp-status-light__led { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .cp-status-light--off .cp-status-light__led { background: Canvas; box-shadow: inset 0 0 0 2px CanvasText; }
  .cp-status-light__text { color: CanvasText; }
}