.ds-loading {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ds-spacing-unit) * 3);
  color: var(--ds-color-secondary);
}

.ds-loading--centered {
  justify-content: center;
  width: 100%;
  padding: calc(var(--ds-spacing-unit) * 10) 0;
}

.ds-loading__spinner {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--ds-color-secondary) 30%, transparent);
  border-top-color: var(--ds-color-accent);
  animation: dsSpin 900ms linear infinite;
}

.ds-loading__text {
  font-size: 0.95rem;
}

@keyframes dsSpin {
  to { transform: rotate(360deg); }
}