/*
  CFA Design System LoadingIndicator (size=md) — circle-dots.
  Used for pre-Angular bootstrap (linked from index.html) and Angular shell/Discover loaders.
  Matches @cfa/react-core <LoadingIndicator />.
*/

.cfa-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cfa-loading-indicator--fullscreen {
  min-height: 100vh;
  width: 100%;
}

.cfa-loading-indicator__container {
  --container-size: 40px;
  --dot-size: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--container-size);
  height: var(--container-size);
}

.cfa-loading-indicator__spinner {
  --leading-dot-color: #dd0033;
  --trailing-dot-color: rgba(221, 0, 51, 0.5);
  --unfilled-dot-color: #c6c6c6;
  position: relative;
  width: var(--dot-size);
  height: var(--dot-size);
  font-size: var(--dot-size);
  border-radius: 50%;
  transform: translateZ(0);
  animation: cfa-loading-indicator-spin 1.1s infinite;
}

html.spotlight-dark-mode-preload .cfa-loading-indicator__spinner,
body.spotlight-dark-mode .cfa-loading-indicator__spinner {
  --leading-dot-color: #ffffff;
  --trailing-dot-color: rgba(255, 255, 255, 0.6);
}

@keyframes cfa-loading-indicator-spin {
  0%, 100% {
    box-shadow:
      0em -2.6em 0em 0em var(--leading-dot-color),
      1.8em -1.8em 0 0em var(--unfilled-dot-color),
      2.5em 0em 0 0em var(--unfilled-dot-color),
      1.75em 1.75em 0 0em var(--unfilled-dot-color),
      0em 2.5em 0 0em var(--unfilled-dot-color),
      -1.8em 1.8em 0 0em var(--unfilled-dot-color),
      -2.6em 0em 0 0em var(--unfilled-dot-color),
      -1.8em -1.8em 0 0em var(--trailing-dot-color);
  }
  12.5% {
    box-shadow:
      0em -2.6em 0em 0em var(--trailing-dot-color),
      1.8em -1.8em 0 0em var(--leading-dot-color),
      2.5em 0em 0 0em var(--unfilled-dot-color),
      1.75em 1.75em 0 0em var(--unfilled-dot-color),
      0em 2.5em 0 0em var(--unfilled-dot-color),
      -1.8em 1.8em 0 0em var(--unfilled-dot-color),
      -2.6em 0em 0 0em var(--unfilled-dot-color),
      -1.8em -1.8em 0 0em var(--unfilled-dot-color);
  }
  25% {
    box-shadow:
      0em -2.6em 0em 0em var(--unfilled-dot-color),
      1.8em -1.8em 0 0em var(--trailing-dot-color),
      2.5em 0em 0 0em var(--leading-dot-color),
      1.75em 1.75em 0 0em var(--unfilled-dot-color),
      0em 2.5em 0 0em var(--unfilled-dot-color),
      -1.8em 1.8em 0 0em var(--unfilled-dot-color),
      -2.6em 0em 0 0em var(--unfilled-dot-color),
      -1.8em -1.8em 0 0em var(--unfilled-dot-color);
  }
  37.5% {
    box-shadow:
      0em -2.6em 0em 0em var(--unfilled-dot-color),
      1.8em -1.8em 0 0em var(--unfilled-dot-color),
      2.5em 0em 0 0em var(--trailing-dot-color),
      1.75em 1.75em 0 0em var(--leading-dot-color),
      0em 2.5em 0 0em var(--unfilled-dot-color),
      -1.8em 1.8em 0 0em var(--unfilled-dot-color),
      -2.6em 0em 0 0em var(--unfilled-dot-color),
      -1.8em -1.8em 0 0em var(--unfilled-dot-color);
  }
  50% {
    box-shadow:
      0em -2.6em 0em 0em var(--unfilled-dot-color),
      1.8em -1.8em 0 0em var(--unfilled-dot-color),
      2.5em 0em 0 0em var(--unfilled-dot-color),
      1.75em 1.75em 0 0em var(--trailing-dot-color),
      0em 2.5em 0 0em var(--leading-dot-color),
      -1.8em 1.8em 0 0em var(--unfilled-dot-color),
      -2.6em 0em 0 0em var(--unfilled-dot-color),
      -1.8em -1.8em 0 0em var(--unfilled-dot-color);
  }
  62.5% {
    box-shadow:
      0em -2.6em 0em 0em var(--unfilled-dot-color),
      1.8em -1.8em 0 0em var(--unfilled-dot-color),
      2.5em 0em 0 0em var(--unfilled-dot-color),
      1.75em 1.75em 0 0em var(--unfilled-dot-color),
      0em 2.5em 0 0em var(--trailing-dot-color),
      -1.8em 1.8em 0 0em var(--leading-dot-color),
      -2.6em 0em 0 0em var(--unfilled-dot-color),
      -1.8em -1.8em 0 0em var(--unfilled-dot-color);
  }
  75% {
    box-shadow:
      0em -2.6em 0em 0em var(--unfilled-dot-color),
      1.8em -1.8em 0 0em var(--unfilled-dot-color),
      2.5em 0em 0 0em var(--unfilled-dot-color),
      1.75em 1.75em 0 0em var(--unfilled-dot-color),
      0em 2.5em 0 0em var(--unfilled-dot-color),
      -1.8em 1.8em 0 0em var(--trailing-dot-color),
      -2.6em 0em 0 0em var(--leading-dot-color),
      -1.8em -1.8em 0 0em var(--unfilled-dot-color);
  }
  87.5% {
    box-shadow:
      0em -2.6em 0em 0em var(--unfilled-dot-color),
      1.8em -1.8em 0 0em var(--unfilled-dot-color),
      2.5em 0em 0 0em var(--unfilled-dot-color),
      1.75em 1.75em 0 0em var(--unfilled-dot-color),
      0em 2.5em 0 0em var(--unfilled-dot-color),
      -1.8em 1.8em 0 0em var(--unfilled-dot-color),
      -2.6em 0em 0 0em var(--trailing-dot-color),
      -1.8em -1.8em 0 0em var(--leading-dot-color);
  }
}