/**
 * Workspace Files Tree - Children & Indent Guides
 * Tree hierarchy, connectors, and indent guides
 */

/* Children container with indent guides */
.wft-children {
  overflow: hidden;
  position: relative;
}

.wft-children:not(.expanded) {
  display: none;
}

/* Indent guide lines - dashed, always visible */
.wft-children.expanded {
  border-left: 1px dashed rgba(150, 150, 150, 0.35);
  margin-left: 12px;
  padding-left: 4px;
}

/* Horizontal connector from vertical guide to each item */
.wft-children.expanded > .wft-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 4px;
  height: 1px;
  border-top: 1px dashed rgba(150, 150, 150, 0.35);
}

/* Make items relative for the pseudo-element positioning */
.wft-children.expanded > .wft-item {
  position: relative;
}

/* Nested indent guides remain visible at all levels */
.wft-children.expanded .wft-children.expanded {
  border-left-color: rgba(150, 150, 150, 0.3);
}

.wft-children.expanded .wft-children.expanded .wft-children.expanded {
  border-left-color: rgba(150, 150, 150, 0.25);
}

.wft-children.expanded
  .wft-children.expanded
  .wft-children.expanded
  .wft-children.expanded {
  border-left-color: rgba(150, 150, 150, 0.2);
}

/* Direct parent guide (more visible) when hovering on item */
/* These rules need high specificity to override the nested fading rules */
.wft-children.expanded:has(> .wft-item:hover),
.wft-children.expanded .wft-children.expanded:has(> .wft-item:hover),
.wft-children.expanded
  .wft-children.expanded
  .wft-children.expanded:has(> .wft-item:hover),
.wft-children.expanded
  .wft-children.expanded
  .wft-children.expanded
  .wft-children.expanded:has(> .wft-item:hover),
.wft-children.expanded
  .wft-children.expanded
  .wft-children.expanded
  .wft-children.expanded
  .wft-children.expanded:has(> .wft-item:hover) {
  border-left-color: rgba(180, 180, 180, 0.6);
}

/* Also highlight the horizontal connector when hovering */
.wft-children.expanded > .wft-item:hover::before {
  border-top-color: rgba(180, 180, 180, 0.6);
}

/* Hover on container - more visible for better feedback */
.wft-children.expanded:hover {
  border-left-color: rgba(150, 150, 150, 0.45);
}
