/*
 * Loading Components Styles
 *
 * Includes:
 *   - Loading Spinner (.loading-spinner)
 *   - Skeleton Screen (.skeleton-*)
 *   - Progress Indicator (.progress-bar)
 *   - Loading Overlay (.loading-overlay)
 *   - Button Loading States (.btn--loading)
 *
 * Usage: Add these classes to elements to show loading states.
 * Combine with Stimulus controllers for dynamic state management.
 */

/* ============================================
 * CSS ANIMATIONS
 * ============================================ */

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ============================================
 * LOADING SPINNER
 * A circular spinning indicator
 * ============================================ */

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Spinner Sizes */
.loading-spinner--sm {
  width: 14px;
  height: 14px;
  border-width: 1.5px;
}

.loading-spinner--md {
  width: 24px;
  height: 24px;
  border-width: 2.5px;
}

.loading-spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

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

/* Spinner Colors */
.loading-spinner--white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: white;
}

.loading-spinner--primary {
  border-color: var(--color-primary-100);
  border-top-color: var(--color-primary-500);
}

/* ============================================
 * LOADING CONTAINER
 * Centered loading indicator for sections
 * ============================================ */

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-4);
  min-height: 200px;
}

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

.loading-container--compact {
  padding: var(--space-6) var(--space-4);
  min-height: 120px;
}

.loading-text {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  text-align: center;
}

/* ============================================
 * SKELETON SCREENS
 * Placeholder content that mimics the layout
 * ============================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-neutral-200) 0%,
    var(--color-neutral-100) 50%,
    var(--color-neutral-200) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* Skeleton Text Lines */
.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: 4px;
}

.skeleton-text:last-child {
  margin-bottom: 0;
}

.skeleton-text--sm {
  height: 0.75em;
}

.skeleton-text--lg {
  height: 1.25em;
}

.skeleton-text--title {
  height: 1.5em;
  width: 60%;
}

.skeleton-text--short {
  width: 40%;
}

.skeleton-text--medium {
  width: 70%;
}

.skeleton-text--full {
  width: 100%;
}

/* Skeleton Avatar/Circle */
.skeleton-circle {
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-circle--sm {
  width: 24px;
  height: 24px;
}

.skeleton-circle--md {
  width: 36px;
  height: 36px;
}

.skeleton-circle--lg {
  width: 48px;
  height: 48px;
}

/* Skeleton Rectangle */
.skeleton-rect {
  border-radius: 6px;
}

.skeleton-rect--badge {
  width: 60px;
  height: 22px;
  border-radius: 12px;
}

.skeleton-rect--button {
  width: 100px;
  height: 38px;
  border-radius: 6px;
}

/* ============================================
 * SKELETON ISSUE CARD
 * Mimics the issue card loading state
 * ============================================ */

.skeleton-issue-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-neutral-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: 8px;
}

.skeleton-issue-card__id {
  width: 5rem;
  height: 1em;
}

.skeleton-issue-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-issue-card__title {
  height: 1.125em;
  width: 80%;
}

.skeleton-issue-card__meta {
  display: flex;
  gap: 0.75rem;
}

.skeleton-issue-card__meta-item {
  height: 0.875em;
  width: 80px;
}

/* ============================================
 * SKELETON TEAM SECTION
 * Mimics a full team section with issues
 * ============================================ */

.skeleton-team-section {
  margin-bottom: 2rem;
}

.skeleton-team-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 3px solid var(--color-neutral-200);
  margin-bottom: 1rem;
}

.skeleton-team-header__name {
  height: 1.125em;
  width: 120px;
}

.skeleton-team-header__count {
  height: 1em;
  width: 40px;
}

.skeleton-issues-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ============================================
 * SKELETON COMMENT
 * Mimics comment loading state
 * ============================================ */

.skeleton-comment {
  display: flex;
  gap: var(--space-3);
}

.skeleton-comment__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-comment__content {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-50);
  border-radius: 8px;
}

.skeleton-comment__meta {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.skeleton-comment__author {
  height: 0.875em;
  width: 100px;
}

.skeleton-comment__date {
  height: 0.75em;
  width: 80px;
}

.skeleton-comment__body {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* ============================================
 * PROGRESS BAR
 * Horizontal progress indicator
 * ============================================ */

.progress-bar {
  width: 100%;
  height: 4px;
  background: var(--color-neutral-200);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar--thick {
  height: 8px;
  border-radius: 4px;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-primary-500);
  border-radius: inherit;
  transition: width 0.3s ease;
}

/* Indeterminate progress bar */
.progress-bar--indeterminate .progress-bar__fill {
  width: 25%;
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

/* Progress bar colors */
.progress-bar--success .progress-bar__fill {
  background: var(--color-success-500);
}

.progress-bar--warning .progress-bar__fill {
  background: var(--color-warning-500);
}

.progress-bar--error .progress-bar__fill {
  background: var(--color-error-500);
}

/* ============================================
 * LOADING OVERLAY
 * Full-section loading overlay
 * ============================================ */

.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  z-index: 10;
  animation: fade-in 0.15s ease;
}

.loading-overlay--dark {
  background: rgba(0, 0, 0, 0.5);
}

.loading-overlay--transparent {
  background: transparent;
  backdrop-filter: none;
}

/* For containers that need relative positioning */
.loading-wrapper {
  position: relative;
}

/* ============================================
 * BUTTON LOADING STATES
 * Loading states for buttons
 * ============================================ */

.btn--loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn--loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Adjust spinner color based on button variant */
.btn-primary.btn--loading::after {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: white;
}

.btn-secondary.btn--loading::after {
  border-color: var(--color-neutral-200);
  border-top-color: var(--color-neutral-600);
}

.btn-danger.btn--loading::after {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: white;
}

/* ============================================
 * FORM LOADING STATE
 * Disable form while submitting
 * ============================================ */

.form--loading {
  position: relative;
  pointer-events: none;
}

.form--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 5;
}

.form--loading input,
.form--loading textarea,
.form--loading select,
.form--loading button {
  opacity: 0.6;
}

/* ============================================
 * PAGE LOADING INDICATOR
 * Top-of-page progress bar (Turbo style)
 * ============================================ */

.page-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
}

.page-loading-bar__progress {
  height: 100%;
  background: var(--color-primary-500);
  transition: width 0.2s ease;
  box-shadow: 0 0 10px var(--color-primary-400);
}

.page-loading-bar--complete .page-loading-bar__progress {
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* ============================================
 * INLINE LOADING STATES
 * For small inline loading indicators
 * ============================================ */

.inline-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-neutral-500);
  font-size: var(--text-sm);
}

/* Dots animation */
.loading-dots {
  display: inline-flex;
  gap: 3px;
}

.loading-dots__dot {
  width: 6px;
  height: 6px;
  background: var(--color-primary-500);
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}

.loading-dots__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots__dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* ============================================
 * ACCESSIBILITY
 * Screen reader announcements
 * ============================================ */

.sr-loading-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner,
  .skeleton,
  .progress-bar--indeterminate .progress-bar__fill,
  .btn--loading::after,
  .loading-dots__dot {
    animation: none;
  }

  .skeleton {
    background: var(--color-neutral-200);
  }

  .loading-dots__dot {
    opacity: 0.5;
  }

  .loading-dots__dot:nth-child(2) {
    opacity: 0.7;
  }

  .loading-dots__dot:nth-child(3) {
    opacity: 0.9;
  }
}