/* src/components/basic/XWUIComponent/XWUIComponent.css */
/* Reserve space for lazy-loaded content; uses theme tokens when in scope */
.xwui-lazy-placeholder {
  min-height: 4rem;
}

/* Skeleton system - shown while a lazy component is offscreen.
   Subclasses override renderSkeleton() to draw component-shaped blocks using
   .xwui-skeleton (+ optional .xwui-skeleton-text / .xwui-skeleton-circle / .xwui-skeleton-block). */
.xwui-skeleton-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-md, 1rem);
  background: var(--role-surface-bg, var(--bg-card, var(--bg-primary, #fff)));
  border-radius: var(--radius-container, var(--radius-lg, 12px));
}

.xwui-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--skeleton-bg, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  animation: xwui-skeleton-pulse 1.4s ease-in-out infinite;
}

.xwui-skeleton-block { height: 3rem; width: 100%; }
.xwui-skeleton-text  { height: 0.85rem; width: 100%; border-radius: 4px; }
.xwui-skeleton-text-short { height: 0.85rem; width: 60%; border-radius: 4px; }
.xwui-skeleton-title { height: 1.1rem; width: 40%; border-radius: 4px; }
.xwui-skeleton-chip  { height: 1.1rem; width: 3rem; border-radius: 999px; }
.xwui-skeleton-circle { width: 2.5rem; height: 2.5rem; border-radius: 50%; }

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

/* Shimmer overlay variant (activates when the theme sets --skeleton-shimmer: 1) */
.xwui-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, #fff 35%, transparent) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: xwui-skeleton-shimmer 1.6s linear infinite;
}

@keyframes xwui-skeleton-shimmer {
  100% { transform: translateX(100%); }
}