# presentation/styles/anatomy.tree.style.css

> 80 lines of code and 0 definitions.

Tree: Site tree
Language: css
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-styles-anatomy-tree-style-css
Source text: https://banes-lab.com/source/tree/presentation/styles/anatomy.tree.style.css.txt

Listed in [presentation/styles](https://banes-lab.com/api/source/tree/presentation/styles.md), after [presentation/styles/anatomy.style.css](https://banes-lab.com/source/tree/presentation/styles/anatomy.style.css.md) and before [presentation/styles/block.style.css](https://banes-lab.com/source/tree/presentation/styles/block.style.css.md).

## Source

```css
.filesystem-tree {
    align-self: stretch;
    background: var(--card-bg);
    border: var(--border-s) solid var(--white-alpha-border);
    border-radius: var(--radius-md);
    min-width: 0;
}

.tree-scroll {
    min-width: 0;
    overflow: hidden;
    padding: var(--space-md);
}

.tree-title {
    color: var(--tab-accent);
    font-family: var(--font-family-heading);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    margin: 0 0 var(--space-sm);
    text-transform: uppercase;
}

.tree-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--indent-tree);
}

.tree-root {
    padding: 0;
}

.tree-folder > .tree-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--space-xxs);
    list-style: none;
    min-width: 0;
}

.tree-folder > .tree-summary::-webkit-details-marker {
    display: none;
}

.tree-chevron {
    color: var(--accent-half);
    font-size: var(--font-xs);
    transition: transform var(--transition-fast);
}

.tree-folder[open] > .tree-summary > .tree-chevron {
    transform: rotate(var(--rotate-quarter));
}

.tree-link {
    align-items: center;
    border-radius: var(--radius-xs);
    color: var(--white-alpha-secondary);
    display: inline-flex;
    font-size: var(--font-sm);
    gap: var(--space-xs);
    max-width: var(--percent-full);
    min-width: 0;
    padding: 0 var(--space-xs);
}

.tree-file {
    margin-left: var(--indent-tree);
}

.tree-name {
    white-space: nowrap;
}

.tree-icon {
    color: var(--accent-half);
    flex: none;
}

.tree-link:hover {
    background: var(--overlay-subtle);
    color: var(--white);
}

.tree-link.active {
    background: var(--overlay-subtle);
    color: var(--tab-accent);
}

.tree-link.active .tree-icon {
    color: var(--tab-accent);
}
```