.spinner {
  align-items: center;
  display: flex;
  justify-content: center;
}
.spinner-text {
  color: var(--color-text-secondary);
  font-family: var(--font-family-heading);
  font-size: 1rem;
}
.spinner-ring {
  animation: spin 0.75s linear infinite;
  border-radius: var(--border-radius-round);
}
.spinner--sm {
  gap: var(--spacing-sm);
}
.spinner--sm .spinner-ring {
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  height: 1rem;
  width: 1rem;
}
.spinner--sm .spinner-text {
  font-size: 1rem;
}
.spinner--md {
  gap: var(--spacing-sm);
}
.spinner--md .spinner-ring {
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  height: 2rem;
  width: 2rem;
}
.spinner--md .spinner-text {
  font-size: 1.5rem;
}
.spinner--lg {
  gap: var(--spacing-md);
}
.spinner--lg .spinner-ring {
  border: 6px solid var(--color-border);
  border-top-color: var(--color-primary);
  height: 3rem;
  width: 3rem;
}
.spinner--lg .spinner-text {
  font-size: 3rem;
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}