Examples
Multiselectable
A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, aria-multiselectable="true" must be passed to the root ul[role="tree"] element.
With search
A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes includes a search input.
Documentation
Usage
Class | Applied | Outcome |
|---|---|---|
.pf-v6-c-tree-view | <div> | Initiates the tree view container. Required |
.pf-v6-c-tree-view__list | <ul> | Initiates a tree view list. Required |
.pf-v6-c-tree-view__list-item | <li> | Initiates a tree view list item. Required |
.pf-v6-c-tree-view__content | <div> | Initiates a tree view node. Required |
.pf-v6-c-tree-view__node | <button>, <label> | Initiates a tree view node. Required |
.pf-v6-c-tree-view__node-container | <span> | Initiates a tree view node container. Required for compact variant |
.pf-v6-c-tree-view__node-content | <span> | Initiates a tree view node content container used to stack elements. |
.pf-v6-c-tree-view__node-count | <span> | Initiates a tree view node count. |
.pf-v6-c-tree-view__node-toggle | <span>, <button> | Initiates a tree view toggle. |
.pf-v6-c-tree-view__node-toggle-icon | <span> | Initiates a tree view toggle icon. |
.pf-v6-c-tree-view__node-title | <span> | Initiates a tree view node title. |
.pf-v6-c-tree-view__node-text | <span>, <button> | Initiates tree view text. Note: Use a <button> when the node is expandable and selectable. |
.pf-v6-c-tree-view__node-icon | <span> | Initiates a tree view icon. |
.pf-v6-c-tree-view__node-check | <span> | Initiates a tree view check. |
.pf-v6-c-tree-view__action | <div> | Initiates a tree view action wrapper. |
.pf-v6-c-tree-view__search | <div> | Initiates a tree view search wrapper. |
.pf-m-guides | .pf-v6-c-tree-view | Modifies the tree view to the guides presentation. |
.pf-m-compact | .pf-v6-c-tree-view | Modifies the tree view to the compact presentation. |
.pf-m-no-background | .pf-v6-c-tree-view.pf-m-compact | Modifies the tree view compact variant node containers to have a transparent background. |
.pf-m-current | .pf-v6-c-tree-view__node | Modifies the tree view node to be current. |
.pf-m-selectable | .pf-v6-c-tree-view__node | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
.pf-m-truncate | .pf-v6-c-tree-view, .pf-v6-c-tree-view__node-title, .pf-v6-c-tree-view__node-text | Modifies the tree view title or text to truncate. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node--indent--base | calc(1rem * 2 + 0.875rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node--nested-indent--base | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__content--BorderRadius | 6px | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node--PaddingBlockStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node--PaddingInlineEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node--PaddingBlockEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node--BackgroundColor | transparent | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node--m-current--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node--m-current--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node--hover--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-container--Display | contents | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-content--RowGap | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-content--Overflow | visible | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX | -100% | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle--Position | absolute | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle--Color--base | (In light theme) #707070 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle--Color | (In light theme) #707070 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle--BackgroundColor | transparent | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color | (In light theme) #1f1f1f | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle-icon--MinWidth | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle--PaddingBlockStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle--PaddingInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle--PaddingBlockEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle--MarginBlockStart | calc(0.5rem * -1) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle--MarginBlockEnd | calc(0.5rem * -1) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-check--MarginInlineEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-count--MarginInlineStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__search--PaddingBlockStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__search--PaddingInlineEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__search--PaddingBlockEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__search--PaddingInlineStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-icon--PaddingInlineEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-icon--Color | (In light theme) #707070 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle-icon--base--Rotate | 0 | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-toggle-icon--Rotate | 0 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate | 90deg | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-text--max-lines | 1 | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__node-title--FontWeight | 500 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view__action--MarginInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides--guide--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1.5rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides--guide-color--base | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides--guide-width--base | 1px | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides--guide-left--base | calc(calc(1rem * 2 + 0.875rem) - 1.5rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides--guide-left--base--offset | calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides__list-node--guide-width--base | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides__list-item--before--InsetBlockStart | 0 | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides__list-item--before--Width | 1px | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides__list-item--before--Height | 100% | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides__list-item--before--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides__list-item--last-child--before--InsetBlockStart | 1.125rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides__list-item--last-child--before--Height | 1.125rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides__list-item--ZIndex | 100 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides__node--before--Width | 1rem | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides__node--before--Height | 1px | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides__node--before--InsetBlockStart | 1.125rem | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-guides__node--before--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node--indent--base | calc(1rem * 2 + 0.875rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node--nested-indent--base | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact--border--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node--PaddingBlockStart | 0 | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node--PaddingBlockEnd | 0 | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__list-item__list-item__node-toggle--InsetBlockStart | calc(1.5rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__list-item--before--InsetBlockStart | 0 | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__list-item--last-child--before--Height | calc(1.5rem + 0.5rem + 0.25rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__list-item--nested--before--InsetBlockStart | calc(0.5rem * -1) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__list-item--nested--last-child--before--Height | calc(calc(1.5rem + 0.5rem + 0.25rem) + 0.5rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node--before--InsetBlockStart | calc(1.5rem + 0.5rem + 0.25rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node--level-2--PaddingInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineEnd | calc(1rem * -.5) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineStart | calc(1rem * -1.5) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-container--Display | flex | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd--base | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-container--PaddingInlineEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-container--PaddingInlineStart | 0.25rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-container--BorderRadius | 6px | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBlockEnd | 0 | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-no-background__node-container--BackgroundColor | transparent | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 0.5rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base | calc(1rem * 2 + 0.875rem) | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base | 3rem | ||
| ||||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockStart | 0 | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd | 0 | ||
| :where(:root, .pf-v6-c-tree-view) | --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart | calc(1rem + 0.5rem + 0.25rem) | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-guides--guide--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2)) | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--border--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__list-item--before--InsetBlockStart | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__list-item--last-child--before--Height | calc(calc(1.5rem + 0.5rem + 0.25rem) + 0.5rem) | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item:last-child | --pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndWidth | 0 | ||
| .pf-v6-c-tree-view.pf-m-compact | --pf-v6-c-tree-view__node--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact | --pf-v6-c-tree-view__node--PaddingBlockStart | 0 | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact | --pf-v6-c-tree-view__node--PaddingBlockEnd | 0 | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact | --pf-v6-c-tree-view__node-container--Display | flex | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact | --pf-v6-c-tree-view__node--hover--BackgroundColor | transparent | ||
| .pf-v6-c-tree-view.pf-m-compact | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart | calc(1.5rem) | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item.pf-m-expanded | --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd | 0 | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node-toggle--Position | static | ||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX | 0 | ||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndWidth | 0 | ||
| .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact.pf-m-no-background | --pf-v6-c-tree-view--m-compact__node--before--InsetBlockStart | calc(1rem + 0.5rem + 0.25rem) | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact.pf-m-no-background .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingBlockStart | 0 | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact.pf-m-no-background .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingBlockEnd | 0 | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact.pf-m-no-background .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--border--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 0.5rem) | ||
| ||||
| .pf-v6-c-tree-view.pf-m-compact.pf-m-no-background .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(3rem * 1 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view.pf-m-no-background | --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor | transparent | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node-toggle-icon--Rotate | 0 | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node-toggle--Color | (In light theme) #707070 | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(calc(calc(1rem * 2 + 0.875rem) - 1rem) * 1 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2)) | ||
| ||||
| .pf-v6-c-tree-view__list-item.pf-m-expanded | --pf-v6-c-tree-view__node-toggle--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-tree-view__list-item.pf-m-expanded | --pf-v6-c-tree-view__node-toggle-icon--Rotate | 90deg | ||
| ||||
| .pf-v6-c-tree-view__node.pf-m-current | --pf-v6-c-tree-view__node--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-tree-view__node-title.pf-m-truncate | --pf-v6-c-tree-view__node-content--Overflow | hidden | ||
| .pf-v6-c-tree-view.pf-m-truncate .pf-v6-c-tree-view__node-title | --pf-v6-c-tree-view__node-content--Overflow | hidden | ||
| .pf-v6-c-tree-view__content:has(> .pf-v6-c-tree-view__node.pf-m-current) | --pf-v6-c-tree-view__content--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(calc(calc(1rem * 2 + 0.875rem) - 1rem) * 2 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart | calc(1.5rem * 1 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart | calc(3rem * 1 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 0.5rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(calc(calc(1rem * 2 + 0.875rem) - 1rem) * 3 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart | calc(1.5rem * 2 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart | calc(3rem * 2 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 0.5rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(calc(calc(1rem * 2 + 0.875rem) - 1rem) * 4 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart | calc(1.5rem * 3 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart | calc(3rem * 3 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 0.5rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(calc(calc(1rem * 2 + 0.875rem) - 1rem) * 5 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart | calc(1.5rem * 4 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart | calc(3rem * 4 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 0.5rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(calc(calc(1rem * 2 + 0.875rem) - 1rem) * 6 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart | calc(1.5rem * 5 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart | calc(3rem * 5 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 0.5rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(calc(calc(1rem * 2 + 0.875rem) - 1rem) * 7 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart | calc(1.5rem * 6 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart | calc(3rem * 6 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 0.5rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(calc(calc(1rem * 2 + 0.875rem) - 1rem) * 8 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart | calc(1.5rem * 7 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart | calc(3rem * 7 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 0.5rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(calc(calc(1rem * 2 + 0.875rem) - 1rem) * 9 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart | calc(1.5rem * 8 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart | calc(3rem * 8 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 0.5rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart | calc(1rem * 2 + 0.875rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view__node--PaddingInlineStart | calc(calc(calc(1rem * 2 + 0.875rem) - 1rem) * 10 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart | calc(1.5rem * 9 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 1rem) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart | calc(3rem * 9 + calc(1rem * 2 + 0.875rem)) | ||
| ||||
| .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item | --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart | calc(calc(1rem * 2 + 0.875rem) - 0.5rem) | ||
| ||||
