/**
 * Workspace Files Tree - Loading Skeleton
 * Shows animated skeleton while tree data loads
 */

/* Loading container */
.wft-tree.wft-loading {
  padding: 8px;
}

/* Skeleton items */
.wft-skeleton-root,
.wft-skeleton-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.wft-skeleton-root {
  margin-bottom: 4px;
}

/* Skeleton icon placeholder */
.wft-skeleton-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: var(--bg-tertiary, #333);
  animation: wft-skeleton-pulse 1.5s ease-in-out infinite;
}

.wft-skeleton-icon.folder {
  background: var(--folder-color, #777777);
  opacity: 0.3;
}

.wft-skeleton-icon.file {
  background: var(--text-muted, #666);
  opacity: 0.2;
}

/* Skeleton name placeholder */
.wft-skeleton-name {
  height: 12px;
  border-radius: 2px;
  background: var(--bg-tertiary, #333);
  animation: wft-skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

/* Staggered animation delays for visual interest */
.wft-skeleton-item:nth-child(2) .wft-skeleton-name {
  animation-delay: 0.15s;
}
.wft-skeleton-item:nth-child(3) .wft-skeleton-name {
  animation-delay: 0.2s;
}
.wft-skeleton-item:nth-child(4) .wft-skeleton-name {
  animation-delay: 0.25s;
}
.wft-skeleton-item:nth-child(5) .wft-skeleton-name {
  animation-delay: 0.3s;
}
.wft-skeleton-item:nth-child(6) .wft-skeleton-name {
  animation-delay: 0.35s;
}

/* Pulse animation */
@keyframes wft-skeleton-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* Light theme */
[data-theme="light"] .wft-skeleton-icon {
  background: var(--border-color, #d0d7de);
}

[data-theme="light"] .wft-skeleton-icon.folder {
  background: var(--folder-color, #4a6fa5);
  opacity: 0.4;
}

[data-theme="light"] .wft-skeleton-name {
  background: var(--border-color, #d0d7de);
}
