// ============================================================
// Spinner Component
// Dual-ring counter-rotating loading spinner
// ============================================================

@layer components {
  .cyber-spinner {
    --spinner-size: 48px;
    --spinner-color-primary: var(--cyber-cyan-500);
    --spinner-color-secondary: var(--cyber-magenta-500);
    --spinner-thickness: 3px;

    position: relative;
    display: inline-block;
    width: var(--spinner-size);
    height: var(--spinner-size);

    // Both rings share common styles
    &::before,
    &::after {
      content: "";
      position: absolute;
      border: var(--spinner-thickness) solid transparent;
      border-radius: 50%;
      inset: 0;
      will-change: transform;
    }

    // Outer ring (clockwise) - cyan top border
    &::before {
      animation: spin 1s linear infinite;
      border-top-color: var(--spinner-color-primary);
    }

    // Inner ring (counter-clockwise) - magenta bottom border
    &::after {
      animation: spin 1s linear infinite reverse;
      animation-delay: -0.5s;
      border-bottom-color: var(--spinner-color-secondary);
    }

    // --------------------------------------------------------
    // Size Variants
    // --------------------------------------------------------

    &--xs {
      --spinner-size: 16px;
      --spinner-thickness: 2px;
    }

    &--sm {
      --spinner-size: 24px;
      --spinner-thickness: 2px;
    }

    &--md {
      --spinner-size: 48px;
      --spinner-thickness: 3px;
    }

    &--lg {
      --spinner-size: 64px;
      --spinner-thickness: 4px;
    }

    &--xl {
      --spinner-size: 96px;
      --spinner-thickness: 5px;
    }

    // --------------------------------------------------------
    // Color Variants
    // --------------------------------------------------------

    &--magenta {
      --spinner-color-primary: var(--cyber-magenta-500);
      --spinner-color-secondary: var(--cyber-cyan-500);
    }

    &--yellow {
      --spinner-color-primary: var(--cyber-yellow-500);
      --spinner-color-secondary: var(--cyber-cyan-500);
    }

    &--green {
      --spinner-color-primary: var(--cyber-green-500);
      --spinner-color-secondary: var(--cyber-cyan-500);
    }

    &--chrome {
      --spinner-color-primary: var(--cyber-chrome-400);
      --spinner-color-secondary: var(--cyber-chrome-600);
    }

    // --------------------------------------------------------
    // Style Variants
    // --------------------------------------------------------

    // Single ring only
    &--single {
      &::after {
        display: none;
      }
    }

    // Dotted style
    &--dotted {
      &::before {
        border-width: calc(var(--spinner-thickness) + 1px);
        border-style: dotted;
      }

      &::after {
        border-width: calc(var(--spinner-thickness) + 1px);
        border-style: dotted;
      }
    }

    // Glow effect
    &--glow {
      &::before {
        filter: drop-shadow(0 0 4px var(--spinner-color-primary));
      }

      &::after {
        filter: drop-shadow(0 0 4px var(--spinner-color-secondary));
      }
    }

    // Pulse animation added
    &--pulse {
      animation: spinner-pulse 1.5s ease-in-out infinite;
    }
  }

  // Spinner rotation
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  // Pulse animation
  @keyframes spinner-pulse {
    0%,
    100% {
      opacity: 100%;
      transform: scale(1);
    }

    50% {
      opacity: 60%;
      transform: scale(0.9);
    }
  }

  // --------------------------------------------------------
  // Alternative Spinner Styles
  // --------------------------------------------------------

  // Dot spinner (three bouncing dots)
  .cyber-spinner-dots {
    --dot-size: 8px;
    --dot-color: var(--cyber-cyan-500);

    display: inline-flex;
    gap: 4px;
    align-items: center;

    span {
      width: var(--dot-size);
      height: var(--dot-size);
      border-radius: 50%;
      background: var(--dot-color);
      animation: spinner-dots-bounce 1.4s ease-in-out infinite;

      &:nth-child(1) {
        animation-delay: 0s;
      }

      &:nth-child(2) {
        animation-delay: 0.16s;
      }

      &:nth-child(3) {
        animation-delay: 0.32s;
      }
    }

    &--magenta {
      --dot-color: var(--cyber-magenta-500);
    }

    &--yellow {
      --dot-color: var(--cyber-yellow-500);
    }

    &--green {
      --dot-color: var(--cyber-green-500);
    }
  }

  @keyframes spinner-dots-bounce {
    0%,
    80%,
    100% {
      opacity: 50%;
      transform: scale(0.6);
    }

    40% {
      opacity: 100%;
      transform: scale(1);
    }
  }

  // Bar spinner (loading bars)
  .cyber-spinner-bars {
    --bar-width: 4px;
    --bar-height: 24px;
    --bar-color: var(--cyber-cyan-500);

    display: inline-flex;
    gap: 3px;
    align-items: center;

    span {
      width: var(--bar-width);
      height: var(--bar-height);
      background: var(--bar-color);
      animation: spinner-bars-scale 1.2s ease-in-out infinite;

      @for $i from 1 through 5 {
        &:nth-child(#{$i}) {
          animation-delay: #{($i - 1) * 0.1}s;
        }
      }
    }

    &--magenta {
      --bar-color: var(--cyber-magenta-500);
    }

    &--yellow {
      --bar-color: var(--cyber-yellow-500);
    }

    &--green {
      --bar-color: var(--cyber-green-500);
    }
  }

  @keyframes spinner-bars-scale {
    0%,
    40%,
    100% {
      transform: scaleY(0.4);
    }

    20% {
      transform: scaleY(1);
    }
  }

  // Reduced motion support for accessibility
  @media (prefers-reduced-motion: reduce) {
    .cyber-spinner,
    .cyber-spinner::before,
    .cyber-spinner::after {
      animation: none;
    }

    .cyber-spinner-dots span,
    .cyber-spinner-bars span {
      animation: none;
    }
  }

  // Loading overlay
  .cyber-spinner-overlay {
    position: absolute;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cyber-void-500) 90%, transparent);
    backdrop-filter: blur(4px);
    inset: 0;

    &__text {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      letter-spacing: var(--tracking-wider);
      text-transform: uppercase;
      color: var(--color-text-secondary);
    }
  }
}