/* ============================================================================
   Shared Loading States
   
   Only shared loading patterns used across multiple components.
   Component-specific loading states belong in component .razor.css files.
   
   - Skeleton animation (base shimmer effect)
   - Loading indicators
   - Error states
   - Empty states
   - Fade-in transitions
   ============================================================================ */

/* Skeleton Animation */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg,
      var(--color-bg-default) 0%,
      var(--color-bg-emphasis) 20%,
      var(--color-bg-default) 40%,
      var(--color-bg-default) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s linear infinite;
  border-radius: var(--radius-md);
}

/* Loading States */
.error,
.no-content {
  text-align: center;
  padding: var(--spacing-8);
  color: var(--color-text-secondary);
}

.fade-in {
  opacity: 0;
  animation: fadeIn var(--duration-normal) var(--easing-ease-in) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.loading-indicator {
  margin-left: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Error States */
.error {
  color: var(--color-red);
}

.error h2 {
  color: var(--color-red);
  margin-bottom: var(--spacing-2);
}

/* Responsive */
@media (max-width: 768px) {
  /* Component-specific responsive styles in .razor.css files */
}