Health Status Trio

<div class="nuda-in2-healthtrio" role="group" aria-label="System status">
  <div class="nuda-in2-healthtrio__row" data-level="ok">
    <span class="nuda-in2-healthtrio__dot" aria-hidden="true"></span>
    <svg class="nuda-in2-healthtrio__glyph" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20 6 9 17l-5-5" />
    </svg>
    <span class="nuda-in2-healthtrio__name">API</span>
    <span class="nuda-in2-healthtrio__state">Operational</span>
  </div>
  <div class="nuda-in2-healthtrio__row" data-level="warn">
    <span class="nuda-in2-healthtrio__dot" aria-hidden="true"></span>
    <svg class="nuda-in2-healthtrio__glyph" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 9v4" />
      <path d="M12 17h.01" />
      <path d="M10.3 3.6 2.6 17a1.6 1.6 0 0 0 1.4 2.4h16a1.6 1.6 0 0 0 1.4-2.4L13.7 3.6a1.6 1.6 0 0 0-2.7 0Z" />
    </svg>
    <span class="nuda-in2-healthtrio__name">Database</span>
    <span class="nuda-in2-healthtrio__state">Degraded</span>
  </div>
  <div class="nuda-in2-healthtrio__row" data-level="down">
    <span class="nuda-in2-healthtrio__dot" aria-hidden="true"></span>
    <svg class="nuda-in2-healthtrio__glyph" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
      <path d="M18 6 6 18" />
      <path d="M6 6l12 12" />
    </svg>
    <span class="nuda-in2-healthtrio__name">CDN</span>
    <span class="nuda-in2-healthtrio__state">Down</span>
  </div>
</div>

.nuda-in2-healthtrio {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  min-width: 150px;
}

.nuda-in2-healthtrio__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.nuda-in2-healthtrio__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.nuda-in2-healthtrio__glyph {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.nuda-in2-healthtrio__name {
  color: #cfcfcf;
  font-weight: 600;
  margin-right: auto;
}

.nuda-in2-healthtrio__state {
  font-weight: 600;
}

.nuda-in2-healthtrio__row[data-level="ok"] .nuda-in2-healthtrio__dot {
  background: #6ee7b7;
  animation: _nuda-in2healthtrio-beat 2.4s ease-in-out infinite;
}

.nuda-in2-healthtrio__row[data-level="ok"] .nuda-in2-healthtrio__glyph, .nuda-in2-healthtrio__row[data-level="ok"] .nuda-in2-healthtrio__state {
  color: #6ee7b7;
}

.nuda-in2-healthtrio__row[data-level="warn"] .nuda-in2-healthtrio__dot {
  background: #facc15;
}

.nuda-in2-healthtrio__row[data-level="warn"] .nuda-in2-healthtrio__glyph, .nuda-in2-healthtrio__row[data-level="warn"] .nuda-in2-healthtrio__state {
  color: #facc15;
}

.nuda-in2-healthtrio__row[data-level="down"] .nuda-in2-healthtrio__dot {
  background: #f87171;
}

.nuda-in2-healthtrio__row[data-level="down"] .nuda-in2-healthtrio__glyph, .nuda-in2-healthtrio__row[data-level="down"] .nuda-in2-healthtrio__state {
  color: #f87171;
}

@keyframes _nuda-in2healthtrio-beat {
  0%,100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: .7;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-in2-healthtrio__row[data-level="ok"] .nuda-in2-healthtrio__dot {
    animation: none !important;
  }
}