/* Shared loading spinner (.vis-spinner): the one spinner look, DESIGN-UX.md
   "Loading spinner" row. Moved out of pages/visibility.css so pages that do not
   bundle that page sheet (Knowledge Graph) can use it without a page-local copy.

   @author Sander Tamaela
   @created 2026-10-29
   @modified 2026-11-08 */

@keyframes vis-spin { to { transform: rotate(360deg); } }
.vis-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--tl-e5e7eb, #e5e7eb);
  border-top-color: #8b5cf6;
  border-radius: 50%;
  animation: vis-spin 0.8s linear infinite;
}

/* Drill-down size (DESIGN-UX.md: 16px/2px), e.g. the edit-brand dialog while it loads. */
.vis-spinner--sm { width: 16px; height: 16px; border-width: 2px; vertical-align: -3px; }

/* Spinner inside a button while its action runs (DESIGN-UX.md "Button loading
   state"): same values as sentiment.css .btn-analyze .spinner, so pages stop
   re-declaring it under their own names. White on a filled button (also the
   grey .btn-secondary); add .btn-spinner--dark on a white/outline button. */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff; /* theme-keep */
  border-radius: 50%;
  animation: vis-spin 0.7s linear infinite;
  vertical-align: -2px;
  flex-shrink: 0;
}
.btn-spinner--dark {
  border-color: var(--tl-rgba-0-0-0-0p2, rgba(0, 0, 0, 0.2));
  border-top-color: var(--tl-374151, #374151);
}

/* Page-level loading line (DESIGN-UX.md "Slow data loads after the page"):
   <div class="vis-loading" role="status"><span class="vis-spinner"></span> Loading ...</div>
   Shared here so pages without pages/visibility.css get the same line. */
.vis-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 16px;
  font-size: 13px;
  color: var(--tc-6b7280, #6b7280);
}
.vis-loading--inline { justify-content: flex-start; padding: 8px 0; }