/**
 * Styles für den Aktiv-Badge Block
 */

/* Pill-Design für die Aktiv-Auszeichnung */
.wp-aktionsnetzwerk-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    background-color: #10b981; /* Grün */
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: 9999px; /* Vollständig abgerundet für Pill-Effekt */
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    transition: background-color 0.2s ease-in-out;
}

/* Ausrichtungs-Optionen */
.wp-aktionsnetzwerk-active-badge.align-left {
    float: left;
    display: flex;
}

.wp-aktionsnetzwerk-active-badge.align-right {
    float: right;
    display: flex;
}

/* Pulsierender Punkt vor dem Text */
.wp-aktionsnetzwerk-active-badge::before {
    content: '';
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    background-color: currentColor;
    border-radius: 50%;
    animation: pulse-dot 1.2s ease-in-out infinite;
}

/* Pulse-Animation */
@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.4);
    }
}

/* Hover-Effekt */
.wp-aktionsnetzwerk-active-badge:hover {
    background-color: #059669; /* Dunkleres Grün */
}

/* Alternative Farbvarianten über zusätzliche Klassen */
.wp-aktionsnetzwerk-active-badge.is-style-blue {
    background-color: #3b82f6;
}

.wp-aktionsnetzwerk-active-badge.is-style-blue:hover {
    background-color: #2563eb;
}

.wp-aktionsnetzwerk-active-badge.is-style-purple {
    background-color: #8b5cf6;
}

.wp-aktionsnetzwerk-active-badge.is-style-purple:hover {
    background-color: #7c3aed;
}

.wp-aktionsnetzwerk-active-badge.is-style-orange {
    background-color: #f59e0b;
}

.wp-aktionsnetzwerk-active-badge.is-style-orange:hover {
    background-color: #d97706;
}

/* Editor-Stile */
.wp-aktionsnetzwerk-active-badge-editor {
    padding: 1rem;
}

.wp-aktionsnetzwerk-placeholder .components-placeholder {
    min-height: 120px;
}

.wp-aktionsnetzwerk-empty-placeholder,
.wp-aktionsnetzwerk-error-placeholder {
    padding: 1rem;
    background-color: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: 0.375rem;
    color: #6b7280;
    font-size: 0.875rem;
    text-align: center;
}

.wp-aktionsnetzwerk-error-placeholder {
    background-color: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}