/* Page waits use the approved ca outline. Compact waits use a legible arc. */
.brand-loader {
  display: block;
  width: 88px;
  height: 88px;
  flex: none;
  color: var(--theme-accent);
}
.brand-loader path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-loader-outline {
  opacity: 0;
}
.loading-indicator--page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 16px;
}

@property --loading-sweep {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: false;
}
.loading-spinner {
  --loading-sweep: 90deg;
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    transparent 0deg,
    currentColor var(--loading-sweep),
    transparent var(--loading-sweep)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 1.6px),
    #000 calc(100% - 1.3px)
  );
  animation:
    loading-spin 0.85s linear infinite,
    loading-stretch 1.4s ease-in-out infinite;
}
@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-stretch {
  0%,
  100% {
    --loading-sweep: 90deg;
  }
  50% {
    --loading-sweep: 280deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-loader-outline {
    opacity: 1;
  }
  .brand-loader-trail {
    display: none;
  }
  .loading-spinner {
    animation: none;
  }
}