@use '../styles/variables' as *;

// ── Block ─────────────────────────────────────────────────────────────────────
.spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: $spacing-4;
  min-height: 240px;

  // ── Elements ────────────────────────────────────────────────────────────────
  &__ring {
    display: block;
    width: 44px;
    height: 44px;
    border: 3px solid var(--clr-border, #{$gray-200});
    border-top-color: $primary-500;
    border-radius: 50%;
    animation: spinner-spin 0.75s linear infinite;
  }

  &__label {
    font-size: $font-size-sm;
    color: var(--clr-text-muted, #{$color-text-muted});
  }
}

@keyframes spinner-spin {
  to { transform: rotate(360deg); }
}
