// Tree Component
// CLI-inspired hierarchical list with visual lines

/**
 * @section Tree
 */

/** @public CLI-style hierarchical list */
.tree {
  --tree-indent: var(--spacing-4);
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: hsl(var(--foreground));

  ul {
    list-style: none;
    margin: 0;
    padding-left: var(--tree-indent);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0.5rem;
      top: 0;
      bottom: 0.5em;
      width: 1px;
      background: hsl(var(--foreground));
    }
  }

  li {
    position: relative;
    margin: 0;
    padding-left: var(--tree-indent);

    &::before {
      content: '';
      position: absolute;
      top: 0.9em;
      left: 0.5rem;
      width: calc(var(--tree-indent) - 0.5rem - 0.25rem);
      height: 1px;
      background: hsl(var(--foreground));
    }

    &:last-child > ul::before {
      display: none;
    }
  }

  i, .icon {
    margin-right: var(--spacing-2);
    color: hsl(var(--muted-foreground));
  }
}