@layer components {
  /* Loading States
   * CSS-only spinner and skeleton animations.
   * Spinner used standalone or inside .btn--loading.
   */

  @keyframes spin {
    to { rotate: 1turn; }
  }

  @keyframes pulse {
    50% { opacity: 0.5; }
  }

  /* --- Spinner --- */

  .spinner {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 600ms linear infinite;
  }

  .spinner--sm {
    width: 1em;
    height: 1em;
  }

  .spinner--lg {
    width: 2em;
    height: 2em;
    border-width: 3px;
  }

  /* --- Skeleton placeholders --- */

  .skeleton {
    background: var(--color-surface);
    border-radius: var(--radius);
    animation: pulse 1.5s ease-in-out infinite;
  }

  .skeleton--text {
    height: 1em;
    margin-block-end: var(--space-2);

    &:last-child {
      width: 60%;
    }
  }

  .skeleton--heading {
    height: 1.5em;
    width: 40%;
    margin-block-end: var(--space-4);
  }

  .skeleton--circle {
    border-radius: var(--radius-full);
  }

  .skeleton--card {
    height: 8rem;
    border-radius: var(--radius-lg);
  }
}