/* Spinner Component */

/* Loading indicator with smooth animation */

@layer components {
  /* ============================================
     BASE SPINNER
     ============================================ */
  .spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .spinner__circle {
    animation: spinner-rotate 2s linear infinite;
    transform-origin: center center;
  }

  .spinner__path {
    stroke-linecap: round;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    animation: spinner-dash 1.5s ease-in-out infinite;
  }

  /* Rotation animation */
  @keyframes spinner-rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  /* Dash animation */
  @keyframes spinner-dash {
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
    }

    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
    }
  }

  /* ============================================
     SIZE VARIANTS
     ============================================ */
  .spinner--xs {
    width: 1rem;
    height: 1rem;
  }

  .spinner--sm {
    width: 1.5rem;
    height: 1.5rem;
  }

  .spinner--md {
    width: 2rem;
    height: 2rem;
  }

  .spinner--lg {
    width: 3rem;
    height: 3rem;
  }

  .spinner--xl {
    width: 4rem;
    height: 4rem;
  }

  /* ============================================
     COLOR VARIANTS
     ============================================ */
  .spinner--primary .spinner__path {
    stroke: var(--color-brand);
  }

  .spinner--secondary .spinner__path {
    stroke: var(--color-gray-4);
  }

  .spinner--success .spinner__path {
    stroke: var(--color-success);
  }

  .spinner--error .spinner__path {
    stroke: var(--color-error);
  }

  .spinner--warning .spinner__path {
    stroke: var(--color-warning-dark);
  }

  .spinner--info .spinner__path {
    stroke: var(--color-info);
  }

  /* ============================================
     UTILITY: CENTERED SPINNER
     ============================================ */
  .spinner--centered {
    margin: 0 auto;
  }

  /* Spinner with text */
  .spinner-with-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
  }
}