/*
 * musikblog-ui — mb-undo.css
 *
 * Geteilte Bausteine fürs Inline-Undo (Termine / Follows / Artikel-Favoriten):
 *   - Design-Tokens als CSS-Variablen (hell + dunkel),
 *   - die Pulse-Keyframes (Frist-Signal),
 *   - das injizierte Undo-Icon (Lucide rotate-ccw) inkl. Pulsieren.
 *
 * Das BUTTON-Grau + das ZEILEN-Dimmen macht jedes Plugin lokal (das Markup
 * unterscheidet sich je Liste), referenziert aber die Tokens hier:
 *   var(--mb-undo-border), var(--mb-undo-fg), var(--mb-undo-radius),
 *   var(--mb-undo-dim).
 * Gemeinsame Klassen, die das JS (window.MBUndo) setzt:
 *   .mb-undo-removing  → am Eintrag (Zeile) während der Frist
 *   .mb-undo-btn       → am aktiven Button im Undo-Zustand
 *   .mb-undo-icon      → das injizierte rotate-ccw-SVG (pulsiert)
 *   .mb-undo-fadeout   → am Eintrag kurz vor dem endgültigen Entfernen
 *
 * WICHTIG (Lektion aus musikblog-favorites 1.17.1): Die Pulse-Animation NICHT
 * auf ein Element legen, das eine konkurrierende `opacity: … !important` trägt
 * — eine !important-Deklaration schlägt laut CSS-Kaskade die Animation und
 * friert sie ein (Firefox spec-konform → kein Blinken). Darum läuft die
 * Animation auf dem Icon-SVG, das keine konkurrierende Opacity hat.
 */

/* Design-Tokens (MusikBlog-Design-System). Hell = Default, Dunkel über
   body.mb-dark (WP Dark Mode). */
:root {
    --mb-undo-border: rgba(34, 34, 39, 0.22);  /* --border-strong (light) */
    --mb-undo-fg:     #55555E;                  /* --fg-2 (light) */
    --mb-undo-radius: 2px;                       /* --r-xs */
    --mb-undo-dim:    0.4;                        /* Zeilen-Dimmung */
    --mb-undo-ease:   cubic-bezier(0.2, 0.6, 0.2, 1);
}
body.mb-dark {
    --mb-undo-border: rgba(255, 255, 255, 0.30); /* --border-strong (dark) */
    --mb-undo-fg:     #B6B6BE;                    /* --fg-2 (dark) */
}

/* Pulsieren = Frist-Signal (NUR Deckkraft → keine Größenänderung). */
@keyframes mb-undo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Injiziertes Undo-Icon: sichtbar + pulsierend. */
.mb-undo-icon {
    display: inline-flex;
    flex: 0 0 auto;
    animation: mb-undo-pulse 1s var(--mb-undo-ease) infinite;
}

/* Reduced Motion: kein Pulsieren (Icon bleibt statisch sichtbar, Frist läuft). */
@media (prefers-reduced-motion: reduce) {
    .mb-undo-icon { animation: none; }
}