/*
 * activity-indicator.css — the single activity-indicator component (Phase 134-08,
 * UAT-03). Theme variables ONLY (CLAUDE.md UI Theme rules) — no hardcoded color
 * literals, or the color guard blocks the commit. Consolidates the five loading
 * idioms of registry §1.23 into one themed component.
 */

.activity-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.2;
    vertical-align: middle;
}

.activity-indicator__dot {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--color-accent-primary);
    animation: activity-indicator-pulse 1s ease-in-out infinite;
}

.activity-indicator__label {
    color: var(--color-text-secondary);
}

.activity-indicator__detail {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

@keyframes activity-indicator-pulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* Respect reduced-motion preference — the dot stays visible, just static. */
@media (prefers-reduced-motion: reduce) {
    .activity-indicator__dot {
        animation: none;
        opacity: 1;
    }
}