.pending {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.pending__dot {
  flex: none;
  inline-size: var(--space-3);
  block-size: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  animation: pending-breathe 1.2s ease-in-out infinite;
}

@keyframes pending-breathe {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pending__dot {
    animation: none;
  }
}