/**
 * Commerce Learning Hub - Loading States
 * 
 * Skeleton screens, spinners, progress indicators.
 */

/* ============================================
   SPINNER VARIANTS
   ============================================ */
.spinner {
  display: inline-block;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: spin 0.8s linear infinite;
}

.spinner--sm { width: 1rem; height: 1rem; border-width: 2px; }
.spinner--md { width: 2rem; height: 2rem; border-width: 3px; }
.spinner--lg { width: 3rem; height: 3rem; border-width: 4px; }
.spinner--xl { width: 4rem; height: 4rem; border-width: 4px; }

.spinner--secondary { border-top-color: var(--color-secondary); }
.spinner--success { border-top-color: var(--color-success); }

/* ============================================
   LOADING CONTAINER
   ============================================ */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.loading-container--inline {
  flex-direction: row;
  padding: var(--space-4);
}

/* ============================================
   SKELETON SCREENS
   ============================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-elevated) 0%,
    var(--color-border) 50%,
    var(--color-surface-elevated) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: var(--radius-md);
}

.skeleton--text {
  height: 1rem;
  margin-bottom: var(--space-2);
  width: 100%;
}

.skeleton--text-sm {
  height: 0.75rem;
  width: 60%;
}

.skeleton--title {
  height: 1.5rem;
  width: 50%;
  margin-bottom: var(--space-4);
}

.skeleton--heading {
  height: 2rem;
  width: 70%;
  margin-bottom: var(--space-4);
}

.skeleton--avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.skeleton--card {
  height: 200px;
  border-radius: var(--radius-lg);
}

.skeleton--button {
  height: 2.5rem;
  width: 120px;
  border-radius: var(--radius-md);
}

.skeleton--input {
  height: 2.5rem;
  width: 100%;
  border-radius: var(--radius-md);
}

.skeleton--chart {
  height: 300px;
  width: 100%;
  border-radius: var(--radius-lg);
}

.skeleton--table-row {
  height: 3rem;
  width: 100%;
  margin-bottom: var(--space-2);
}

/* Skeleton layout helpers */
.skeleton-card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skeleton-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ============================================
   PROGRESS CIRCLE
   ============================================ */
.progress-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-circle__svg {
  transform: rotate(-90deg);
}

.progress-circle__bg {
  fill: none;
  stroke: var(--color-border);
}

.progress-circle__fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--transition-base);
}

.progress-circle__label {
  position: absolute;
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

/* ============================================
   DOT LOADER
   ============================================ */
.dot-loader {
  display: inline-flex;
  gap: var(--space-1);
}

.dot-loader__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: dotPulse 1.4s ease-in-out infinite;
}

.dot-loader__dot:nth-child(2) { animation-delay: 0.2s; }
.dot-loader__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================
   BUTTON LOADING STATE
   ============================================ */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  color: var(--color-text-inverse);
}

.btn--secondary.btn--loading::after {
  color: var(--color-primary);
}