/* Loading placeholders for async / Turbo frame content — GitHub issue #95.
   Partial: app/views/shared/components/_skeleton.html.erb */
@layer components {

.skeleton-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.skeleton {
  flex-shrink: 0;
  background: var(--color-slate-12);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s var(--ease-default) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

.skeleton--line {
  height: 0.75rem;
  width: 100%;
}

/* First child is .visually-hidden; line blocks start at nth-child(2). */
.skeleton-group--lines .skeleton--line:nth-child(4n + 2) {
  max-width: 92%;
}

.skeleton-group--lines .skeleton--line:nth-child(4n + 3) {
  max-width: 68%;
}

.skeleton-group--lines .skeleton--line:nth-child(4n + 4) {
  max-width: 100%;
}

.skeleton-group--lines .skeleton--line:nth-child(4n + 5) {
  max-width: 78%;
}

.skeleton--card {
  width: 100%;
  min-height: var(--space-16);
  border-radius: var(--radius-md);
}

.skeleton--video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
}

.skeleton--circle {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

}