/**
 * loadingDots.css — 共用的三點脈動 loading 指示器
 * 取自 the-spinner-dots-iii（CodePen: Vsprtn/pen/KwKeVrN）的 .dots-1 造型，
 * 改用 currentColor 主題化，取代純文字「載入中...」。
 *
 * 用法：<span class="loading-dots" role="status" aria-label="載入中"></span>
 */

.loading-dots {
  display: inline-block;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--color-primary);
  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
  transform: translateX(-38px);
  animation: loading-dots-pulse 0.5s infinite alternate linear;
  margin: 0 34px;
}

@keyframes loading-dots-pulse {
  50% {
    box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px;
  }
  100% {
    box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px;
  }
}

.loading-line {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* 縮小版：用於按鈕內文字旁等空間有限的地方 */
.loading-dots--sm {
  transform: translateX(-38px) scale(0.4);
  margin: 0 12px;
}

@media (prefers-reduced-motion: reduce) {
  .loading-dots { animation: none; box-shadow: 19px 0 0 3px, 38px 0 0 3px, 57px 0 0 3px; }
}