// =============================================================================
// Spinner — inline loading indicator
// =============================================================================

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
}

// Size variants
.sm {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}

.md {
  width: 12px;
  height: 12px;
  border-width: 2px;
}

.lg {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.xl {
  width: 48px;
  height: 48px;
  border-width: 4px;
}
