/* ===== OO StatusDot =====
   Nutzt dieselben --_btn-* Vars wie .oo-btn und .oo-badge (gesetzt via OoButtonStyle inline style):
   Solid füllt den Punkt (--_btn-bg), Outline zeigt nur den Ring (--_btn-border). Ohne ButtonStyle: hohler Ring in der Rahmenfarbe.
   Die Standardwerte stehen am Punkt selbst, nicht als Fallback: Sonst erbte er die Vars eines umgebenden Buttons
   (Ghost: beide transparent) und wäre unsichtbar. Der Inline-Style eines ButtonStyle überschreibt sie.
   ======================== */

.oo-status-dot {
    --_btn-bg: transparent;
    --_btn-border: var(--oo-color-border-strong);
    display: inline-block;
    width: var(--oo-status-dot-size, 0.5em);
    height: var(--oo-status-dot-size, 0.5em);
    flex-shrink: 0;
    border-radius: 50%;
    border: var(--oo-border-width) solid var(--_btn-border);
    background: var(--_btn-bg);
}

/* Hof in der Farbe des Punkts: Solid liefert sie über --_btn-bg, Outline über --_btn-border; die jeweils andere Variable
   ist transparent und trägt nichts bei. */
.oo-status-dot--halo {
    box-shadow:
        0 0 0 2px color-mix(in oklch, var(--_btn-bg) 25%, transparent),
        0 0 0 2px color-mix(in oklch, var(--_btn-border) 25%, transparent);
}

.oo-status-dot--pulse {
    animation: oo-status-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes oo-status-dot-pulse {
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .oo-status-dot--pulse {
        animation: none;
    }
}