/* The status LED (docs/ui-spec.md § Status light). Colour and blink come from two attributes the
   script sets from deriveLight(): data-color = red | amber | green, data-blink = "true" | "false".
   Blink: 1 Hz, 50 % duty. Under prefers-reduced-motion the blink stays but fades 100 % <-> 35 %:
   ui/led.js adds `led-fade` instead of `led-blink` (the animation class is the only thing reduced
   motion changes). data-phase = "on" | "off" freezes one phase (dev screenshots only). */
.led {
  --led: var(--led-red);
  --led-off: var(--led-red-off);
  flex: none;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--led);
  /* A recessed socket in the bezel, then the glow in the LED's own colour. */
  box-shadow:
    0 0 0 3px var(--bezel-dark),
    0 0 0 4px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    0 0 9px 3px var(--led);
}

.led[data-color="amber"] {
  --led: var(--led-amber);
  --led-off: var(--led-amber-off);
}

.led[data-color="green"] {
  --led: var(--led-green);
  --led-off: var(--led-green-off);
}

/* ui/led.js sets .led-blink (or .led-fade under reduced motion) on a blinking light. */
.led.led-blink[data-blink="true"]:not([data-phase]) {
  animation: led-blink var(--led-period) linear infinite;
}

/* Reduced motion: the blink stays (it carries information) but fades instead of switching off. */
.led.led-fade[data-blink="true"]:not([data-phase]) {
  animation: led-fade var(--led-period) ease-in-out infinite;
}

@keyframes led-fade {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@keyframes led-blink {
  0%,
  49.99% {
    background: var(--led);
    box-shadow:
      0 0 0 3px var(--bezel-dark),
      0 0 0 4px rgba(0, 0, 0, 0.28),
      inset 0 1px 1px rgba(255, 255, 255, 0.55),
      0 0 9px 3px var(--led);
  }
  50%,
  100% {
    background: var(--led-off);
    box-shadow:
      0 0 0 3px var(--bezel-dark),
      0 0 0 4px rgba(0, 0, 0, 0.28),
      inset 0 1px 1px rgba(255, 255, 255, 0.15);
  }
}

.led[data-phase="on"] {
  animation: none;
}

.led[data-phase="off"] {
  animation: none;
  background: var(--led-off);
  box-shadow:
    0 0 0 3px var(--bezel-dark),
    0 0 0 4px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
}