Skip to content

Tree view

Examples

Single selectable

Multiselectable

A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, the isMultiSelectable property must be passed.

With separate selection and expansion

The hasSelectableNodes modifier will separate the expansion and selection behaviors, allowing a parent node to be selected or deselected without toggling its expansion.

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.

With checkboxes

With icons

With unique icon per item

With badges

With custom badges

With action items

Guides

Compact

Compact, no background

With memoization

Turning on memoization with the useMemo property helps prevent unnecessary re-renders for large data sets. With this flag active, activeItems must pass in an array of nodes along the selected item's path to update properly.

Props

TreeView

The main tree view component.
*required
NameTypeDefaultDescription
datarequiredTreeViewDataItem[]Data of the tree view.
activeItemsTreeViewDataItem[]Active items of tree view.
allExpandedbooleanSets the expanded state on all tree nodes, overriding default behavior and current internal state.
aria-labelstringA text string that sets the accessible name of the tree view list. Either this or the aria-labelledby property must be passed in.
aria-labelledbystringA space separated list of element id's that sets the accessible name of the tree view list. Either this or the aria-label property must be passed in.
classNamestringClass to add if not passed a parentItem property.
compareItems(item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean(item, itemToCheck) => item.id === itemToCheck.idComparison function for determining active items.
defaultAllExpandedbooleanfalseSets the default expanded behavior.
expandedIconReact.ReactNodeIcon for all expanded node items.
hasBadgesbooleanfalseFlag indicating if all nodes in the tree view should have badges.
hasCheckboxesbooleanfalseFlag indicating if all nodes in the tree view should have checkboxes.
hasGuidesbooleanfalseFlag indicating if the tree view has guide lines.
hasSelectableNodesbooleanfalseFlag indicating that tree nodes should be independently selectable, even when having children.
iconReact.ReactNodeIcon for all leaf or unexpanded node items.
idstringID of the tree view.
isMultiSelectablebooleanfalseFlag indicating whether multiple nodes can be selected in the tree view. This will also set the aria-multiselectable attribute on the tree view list which is required to be true when multiple selection is intended. Can only be applied to the root tree view list.
isNestedbooleanfalseFlag indicating if the tree view is nested.
onCheck(event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => voidCallback for item checkbox selection.
onCollapse(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => voidCallback for collapsing a node with children.
onExpand(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => voidCallback for expanding a node with children.
onSelect(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => voidCallback for item selection.
parentItemTreeViewDataItemInternal. Parent item of a tree view list item.
toolbarReact.ReactNodeToolbar to display above the tree view.
useMemobooleanFlag indicating the tree view should utilize memoization to help render large data sets. Setting this property requires that the activeItems property is passed an array containing every node in the selected item's path.
variant'default' | 'compact' | 'compactNoBackground''default'Variant presentation styles for the tree view.

TreeViewDataItem

Properties that make up a tree view data item. These properties should be passed in as an object to one of the various tree view component properties which accept TreeViewDataItem as a type.
*required
NameTypeDefaultDescription
namerequiredReact.ReactNodeInternal content of a tree view item.
actionReact.ReactNodeAction of a tree view item, which can be either a button or dropdown component.
badgePropsanyAdditional properties of the tree view item badge.
checkPropsTreeViewCheckPropsAdditional properties of the tree view item checkbox.
childrenTreeViewDataItem[]Child nodes of a tree view item.
customBadgeContentReact.ReactNodeOptional prop for a custom badge.
defaultExpandedbooleanFlag indicating if node is expanded by default.
expandedIconReact.ReactNodeExpanded icon of a tree view item.
hasBadgebooleanFlag indicating if a tree view item has a badge.
hasCheckboxbooleanFlag indicating if a tree view item has a checkbox.
iconReact.ReactNodeDefault icon of a tree view item.
idstringID of a tree view item.
titleReact.ReactNodeTitle of a tree view item. Only used in compact presentations.

TreeViewSearch

Renders a search input for the tree view. This sub-component should be passed into the tree view component's toolbar property.
*required
NameTypeDefaultDescription
aria-labelstringAccessible label for the search input.
classNamestringClasses applied to the wrapper for the search input.
idstringId for the search input.
namestringName for the search input.
onSearch(event: React.ChangeEvent<HTMLInputElement>) => voidCallback for search input.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-tree-view--pf-v6-c-tree-view__node--indent--base
calc(1rem * 2 + 0.875rem)
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • calc(1rem * 2 + 0.875rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view__node--nested-indent--base
calc(calc(1rem * 2 + 0.875rem) - 1rem)
  • --pf-v6-c-tree-view__node--nested-indent--base
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • calc(calc(1rem * 2 + 0.875rem) - 1rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view__content--BorderRadius
6px
  • --pf-v6-c-tree-view__content--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 6px
.pf-v6-c-tree-view--pf-v6-c-tree-view__node--PaddingBlockStart
0.5rem
  • --pf-v6-c-tree-view__node--PaddingBlockStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__node--PaddingInlineEnd
0.5rem
  • --pf-v6-c-tree-view__node--PaddingInlineEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__node--PaddingBlockEnd
0.5rem
  • --pf-v6-c-tree-view__node--PaddingBlockEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__node--PaddingInlineStart
calc(1rem * 2 + 0.875rem)
  • --pf-v6-c-tree-view__node--PaddingInlineStart
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • calc(1rem * 2 + 0.875rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view__node--Color
(In light theme) #4d4d4d
  • --pf-v6-c-tree-view__node--Color
  • --pf-t--global--text--color--subtle
  • --pf-t--global--text--color--200
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-tree-view--pf-v6-c-tree-view__node--BackgroundColor
transparent
.pf-v6-c-tree-view--pf-v6-c-tree-view__node--m-current--Color
(In light theme) #151515
  • --pf-v6-c-tree-view__node--m-current--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-tree-view--pf-v6-c-tree-view__node--m-current--BackgroundColor
(In light theme) #f2f2f2
  • --pf-v6-c-tree-view__node--m-current--BackgroundColor
  • --pf-t--global--background--color--primary--clicked
  • --pf-t--global--background--color--200
  • --pf-t--color--gray--10
  • #f2f2f2
.pf-v6-c-tree-view--pf-v6-c-tree-view__node--hover--BackgroundColor
(In light theme) #f2f2f2
  • --pf-v6-c-tree-view__node--hover--BackgroundColor
  • --pf-t--global--background--color--primary--hover
  • --pf-t--global--background--color--200
  • --pf-t--color--gray--10
  • #f2f2f2
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-container--Display
contents
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-content--RowGap
0.5rem
  • --pf-v6-c-tree-view__node-content--RowGap
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-content--Overflow
visible
.pf-v6-c-tree-view--pf-v6-c-tree-view__list--TransitionDuration--expand--slide
0s
.pf-v6-c-tree-view--pf-v6-c-tree-view__list--TransitionDuration--expand--fade
200ms
  • --pf-v6-c-tree-view__list--TransitionDuration--expand--fade
  • --pf-t--global--motion--duration--fade--default
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-tree-view--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide
0s
.pf-v6-c-tree-view--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade
100ms
  • --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade
  • --pf-t--global--motion--duration--fade--short
  • --pf-t--global--motion--duration--sm
  • --pf-t--global--duration--100
  • 100ms
.pf-v6-c-tree-view--pf-v6-c-tree-view__list--TransitionDuration--slide
0s
  • --pf-v6-c-tree-view__list--TransitionDuration--slide
  • --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide
  • 0s
.pf-v6-c-tree-view--pf-v6-c-tree-view__list--TransitionDuration--fade
100ms
  • --pf-v6-c-tree-view__list--TransitionDuration--fade
  • --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade
  • --pf-t--global--motion--duration--fade--short
  • --pf-t--global--motion--duration--sm
  • --pf-t--global--duration--100
  • 100ms
.pf-v6-c-tree-view--pf-v6-c-tree-view__list--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
  • --pf-v6-c-tree-view__list--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--default
  • --pf-t--global--timing-function--200
  • cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-tree-view--pf-v6-c-tree-view__list--Opacity
0
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-expanded__list--Opacity
1
.pf-v6-c-tree-view--pf-v6-c-tree-view__list--TranslateY
0
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-expanded__list--TranslateY
0
.pf-v6-c-tree-view--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart
0.5rem
  • --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart
  • --pf-v6-c-tree-view__node--PaddingBlockStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart
calc(1rem * 2 + 0.875rem)
  • --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart
  • --pf-v6-c-tree-view__node--PaddingInlineStart
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • calc(1rem * 2 + 0.875rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX
-100%
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle--Position
absolute
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle--Color--base
(In light theme) #707070
  • --pf-v6-c-tree-view__node-toggle--Color--base
  • --pf-t--global--icon--color--subtle
  • --pf-t--global--icon--color--200
  • --pf-t--color--gray--50
  • #707070
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle--Color
(In light theme) #707070
  • --pf-v6-c-tree-view__node-toggle--Color
  • --pf-v6-c-tree-view__node-toggle--Color--base
  • --pf-t--global--icon--color--subtle
  • --pf-t--global--icon--color--200
  • --pf-t--color--gray--50
  • #707070
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle--BackgroundColor
transparent
.pf-v6-c-tree-view--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color
(In light theme) #1f1f1f
  • --pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle-icon--MinWidth
0.875rem
  • --pf-v6-c-tree-view__node-toggle-icon--MinWidth
  • --pf-t--global--icon--size--font--body--default
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle--PaddingBlockStart
0.5rem
  • --pf-v6-c-tree-view__node-toggle--PaddingBlockStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle--PaddingInlineEnd
1rem
  • --pf-v6-c-tree-view__node-toggle--PaddingInlineEnd
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle--PaddingBlockEnd
0.5rem
  • --pf-v6-c-tree-view__node-toggle--PaddingBlockEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle--PaddingInlineStart
1rem
  • --pf-v6-c-tree-view__node-toggle--PaddingInlineStart
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle--MarginBlockStart
calc(0.5rem * -1)
  • --pf-v6-c-tree-view__node-toggle--MarginBlockStart
  • calc(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart * -1)
  • calc(--pf-t--global--spacer--sm * -1)
  • calc(--pf-t--global--spacer--200 * -1)
  • calc(0.5rem * -1)
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle--MarginBlockEnd
calc(0.5rem * -1)
  • --pf-v6-c-tree-view__node-toggle--MarginBlockEnd
  • calc(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart * -1)
  • calc(--pf-t--global--spacer--sm * -1)
  • calc(--pf-t--global--spacer--200 * -1)
  • calc(0.5rem * -1)
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration
100ms
  • --pf-v6-c-tree-view__node-toggle-icon--TransitionDuration
  • --pf-t--global--motion--duration--icon--default
  • --pf-t--global--motion--duration--sm
  • --pf-t--global--duration--100
  • 100ms
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
  • --pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--default
  • --pf-t--global--timing-function--200
  • cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-check--MarginInlineEnd
0.5rem
  • --pf-v6-c-tree-view__node-check--MarginInlineEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-count--MarginInlineStart
0.5rem
  • --pf-v6-c-tree-view__node-count--MarginInlineStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__search--PaddingBlockStart
0.5rem
  • --pf-v6-c-tree-view__search--PaddingBlockStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__search--PaddingInlineEnd
0.5rem
  • --pf-v6-c-tree-view__search--PaddingInlineEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__search--PaddingBlockEnd
0.5rem
  • --pf-v6-c-tree-view__search--PaddingBlockEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__search--PaddingInlineStart
0.5rem
  • --pf-v6-c-tree-view__search--PaddingInlineStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-icon--PaddingInlineEnd
0.5rem
  • --pf-v6-c-tree-view__node-icon--PaddingInlineEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-icon--Color
(In light theme) #707070
  • --pf-v6-c-tree-view__node-icon--Color
  • --pf-t--global--icon--color--subtle
  • --pf-t--global--icon--color--200
  • --pf-t--color--gray--50
  • #707070
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle-icon--base--Rotate
0
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-toggle-icon--Rotate
0
  • --pf-v6-c-tree-view__node-toggle-icon--Rotate
  • --pf-v6-c-tree-view__node-toggle-icon--base--Rotate
  • 0
.pf-v6-c-tree-view--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate
90deg
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-text--max-lines
1
.pf-v6-c-tree-view--pf-v6-c-tree-view__node-title--FontWeight
500
  • --pf-v6-c-tree-view__node-title--FontWeight
  • --pf-t--global--font--weight--body--bold
  • --pf-t--global--font--weight--200
  • 500
.pf-v6-c-tree-view--pf-v6-c-tree-view__action--MarginInlineEnd
1rem
  • --pf-v6-c-tree-view__action--MarginInlineEnd
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides--guide--InsetInlineStart
calc(calc(1rem * 2 + 0.875rem) - 1.5rem)
  • --pf-v6-c-tree-view--m-guides--guide--InsetInlineStart
  • --pf-v6-c-tree-view--m-guides--guide-left--base
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides__list-node--guide-width--base)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--lg)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--400)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1.5rem)
  • calc(calc(1rem * 2 + 0.875rem) - 1.5rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides--guide-color--base
(In light theme) #c7c7c7
  • --pf-v6-c-tree-view--m-guides--guide-color--base
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides--guide-width--base
1px
  • --pf-v6-c-tree-view--m-guides--guide-width--base
  • --pf-t--global--border--width--divider--default
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides--guide-left--base
calc(calc(1rem * 2 + 0.875rem) - 1.5rem)
  • --pf-v6-c-tree-view--m-guides--guide-left--base
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides__list-node--guide-width--base)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--lg)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--400)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1.5rem)
  • calc(calc(1rem * 2 + 0.875rem) - 1.5rem)
.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)
  • --pf-v6-c-tree-view--m-guides--guide-left--base--offset
  • calc(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart + --pf-v6-c-tree-view__node-toggle-icon--MinWidth / 2)
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart + --pf-t--global--icon--size--font--body--default / 2)
  • calc(--pf-v6-c-tree-view__node--indent--base + --pf-t--global--font--size--body--default / 2)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) + --pf-t--global--font--size--sm / 2)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) + --pf-t--global--font--size--200 / 2)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) + 0.875rem / 2)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) + 0.875rem / 2)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) + 0.875rem / 2)
  • calc(calc(1rem * 2 + 0.875rem) + 0.875rem / 2)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides__list-node--guide-width--base
1.5rem
  • --pf-v6-c-tree-view--m-guides__list-node--guide-width--base
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides__list-item--before--InsetBlockStart
0
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides__list-item--before--Width
1px
  • --pf-v6-c-tree-view--m-guides__list-item--before--Width
  • --pf-v6-c-tree-view--m-guides--guide-width--base
  • --pf-t--global--border--width--divider--default
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides__list-item--before--Height
100%
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides__list-item--before--BackgroundColor
(In light theme) #c7c7c7
  • --pf-v6-c-tree-view--m-guides__list-item--before--BackgroundColor
  • --pf-v6-c-tree-view--m-guides--guide-color--base
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides__list-item--last-child--before--InsetBlockStart
1.125rem
  • --pf-v6-c-tree-view--m-guides__list-item--last-child--before--InsetBlockStart
  • --pf-v6-c-tree-view--m-guides__node--before--InsetBlockStart
  • 1.125rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides__list-item--last-child--before--Height
1.125rem
  • --pf-v6-c-tree-view--m-guides__list-item--last-child--before--Height
  • --pf-v6-c-tree-view--m-guides__list-item--last-child--before--InsetBlockStart
  • --pf-v6-c-tree-view--m-guides__node--before--InsetBlockStart
  • 1.125rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides__list-item--ZIndex
100
  • --pf-v6-c-tree-view--m-guides__list-item--ZIndex
  • --pf-t--global--z-index--xs
  • --pf-t--global--z-index--100
  • 100
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides__node--before--Width
1rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides__node--before--Height
1px
  • --pf-v6-c-tree-view--m-guides__node--before--Height
  • --pf-v6-c-tree-view--m-guides--guide-width--base
  • --pf-t--global--border--width--divider--default
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides__node--before--InsetBlockStart
1.125rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-guides__node--before--BackgroundColor
(In light theme) #c7c7c7
  • --pf-v6-c-tree-view--m-guides__node--before--BackgroundColor
  • --pf-v6-c-tree-view--m-guides--guide-color--base
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset
1rem
  • --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart
calc(calc(1rem * 2 + 0.875rem) - 1rem)
  • --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • calc(calc(1rem * 2 + 0.875rem) - 1rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node--indent--base
calc(1rem * 2 + 0.875rem)
  • --pf-v6-c-tree-view--m-compact__node--indent--base
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • calc(1rem * 2 + 0.875rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node--nested-indent--base
1.5rem
  • --pf-v6-c-tree-view--m-compact__node--nested-indent--base
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact--border--InsetInlineStart
calc(calc(1rem * 2 + 0.875rem) - 1rem)
  • --pf-v6-c-tree-view--m-compact--border--InsetInlineStart
  • --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • calc(calc(1rem * 2 + 0.875rem) - 1rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node--Color
(In light theme) #151515
  • --pf-v6-c-tree-view--m-compact__node--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node--PaddingBlockStart
0
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node--PaddingBlockEnd
0
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart
0.5rem
  • --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockEnd
0.5rem
  • --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__list-item__list-item__node-toggle--InsetBlockStart
calc(1.5rem)
  • --pf-v6-c-tree-view--m-compact__list-item__list-item__node-toggle--InsetBlockStart
  • calc(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart)
  • calc(--pf-t--global--spacer--lg)
  • calc(--pf-t--global--spacer--400)
  • calc(1.5rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndWidth
1px
  • --pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndWidth
  • --pf-t--global--border--width--divider--default
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndColor
(In light theme) #c7c7c7
  • --pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__list-item--before--InsetBlockStart
0
.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)
  • --pf-v6-c-tree-view--m-compact__list-item--last-child--before--Height
  • --pf-v6-c-tree-view--m-compact__node--before--InsetBlockStart
  • calc(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart + --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart + 0.25rem)
  • calc(--pf-t--global--spacer--lg + --pf-t--global--spacer--sm + 0.25rem)
  • calc(--pf-t--global--spacer--400 + --pf-t--global--spacer--200 + 0.25rem)
  • calc(1.5rem + 0.5rem + 0.25rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__list-item--nested--before--InsetBlockStart
calc(0.5rem * -1)
  • --pf-v6-c-tree-view--m-compact__list-item--nested--before--InsetBlockStart
  • calc(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart * -1)
  • calc(--pf-t--global--spacer--sm * -1)
  • calc(--pf-t--global--spacer--200 * -1)
  • calc(0.5rem * -1)
.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)
  • --pf-v6-c-tree-view--m-compact__list-item--nested--last-child--before--Height
  • calc(--pf-v6-c-tree-view--m-compact__node--before--InsetBlockStart + --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart)
  • calc(calc(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart + --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart + 0.25rem) + --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--lg + --pf-t--global--spacer--sm + 0.25rem) + --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--400 + --pf-t--global--spacer--200 + 0.25rem) + 0.5rem)
  • calc(calc(1.5rem + 0.5rem + 0.25rem) + 0.5rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node--PaddingInlineStart
calc(1rem * 2 + 0.875rem)
  • --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart
  • --pf-v6-c-tree-view--m-compact__node--indent--base
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • calc(1rem * 2 + 0.875rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node--before--InsetBlockStart
calc(1.5rem + 0.5rem + 0.25rem)
  • --pf-v6-c-tree-view--m-compact__node--before--InsetBlockStart
  • calc(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart + --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart + 0.25rem)
  • calc(--pf-t--global--spacer--lg + --pf-t--global--spacer--sm + 0.25rem)
  • calc(--pf-t--global--spacer--400 + --pf-t--global--spacer--200 + 0.25rem)
  • calc(1.5rem + 0.5rem + 0.25rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node--level-2--PaddingInlineStart
calc(1rem * 2 + 0.875rem)
  • --pf-v6-c-tree-view--m-compact__node--level-2--PaddingInlineStart
  • --pf-v6-c-tree-view--m-compact__node--indent--base
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • calc(1rem * 2 + 0.875rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineEnd
calc(1rem * -.5)
  • --pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineEnd
  • calc(--pf-v6-c-tree-view__node-toggle--PaddingInlineStart * -.5)
  • calc(--pf-t--global--spacer--md * -.5)
  • calc(--pf-t--global--spacer--300 * -.5)
  • calc(1rem * -.5)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineStart
calc(1rem * -1.5)
  • --pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineStart
  • calc(--pf-v6-c-tree-view__node-toggle--PaddingInlineStart * -1.5)
  • calc(--pf-t--global--spacer--md * -1.5)
  • calc(--pf-t--global--spacer--300 * -1.5)
  • calc(1rem * -1.5)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-container--Display
flex
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd--base
1.5rem
  • --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd--base
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart
1.5rem
  • --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-container--PaddingInlineEnd
1.5rem
  • --pf-v6-c-tree-view--m-compact__node-container--PaddingInlineEnd
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd
1.5rem
  • --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd
  • --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd--base
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-container--PaddingInlineStart
0.25rem
  • --pf-v6-c-tree-view--m-compact__node-container--PaddingInlineStart
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-container--BorderRadius
6px
  • --pf-v6-c-tree-view--m-compact__node-container--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 6px
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart
1rem
  • --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineEnd
1.5rem
  • --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineEnd
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockEnd
1rem
  • --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockEnd
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart
1.5rem
  • --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor
(In light theme) #f2f2f2
  • --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor
  • --pf-t--global--background--color--secondary--default
  • --pf-t--global--background--color--200
  • --pf-t--color--gray--10
  • #f2f2f2
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBlockEnd
0
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-no-background__node-container--BackgroundColor
transparent
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset
0.5rem
  • --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.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)
  • --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 0.5rem)
  • calc(calc(1rem * 2 + 0.875rem) - 0.5rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base
calc(1rem * 2 + 0.875rem)
  • --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • calc(1rem * 2 + 0.875rem)
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base
3rem
  • --pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base
  • --pf-t--global--spacer--2xl
  • --pf-t--global--spacer--600
  • 3rem
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockStart
0
.pf-v6-c-tree-view--pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd
0
.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--m-compact--m-no-background__node--before--InsetBlockStart
  • calc(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart + --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart + 0.25rem)
  • calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + 0.25rem)
  • calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + 0.25rem)
  • 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--m-guides--guide--InsetInlineStart
  • --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides--guide-left--base--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - calc(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart + --pf-v6-c-tree-view__node-toggle-icon--MinWidth / 2))
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - calc(--pf-v6-c-tree-view__node--PaddingInlineStart + --pf-t--global--icon--size--font--body--default / 2))
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - calc(--pf-v6-c-tree-view__node--indent--base + --pf-t--global--font--size--body--default / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) + --pf-t--global--font--size--sm / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) + --pf-t--global--font--size--200 / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--sm) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--200) + 0.875rem / 2))
  • 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__node--PaddingInlineStart
  • --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart
  • --pf-v6-c-tree-view--m-compact__node--indent--base
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • 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--m-compact--border--InsetInlineStart
  • --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • 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--m-compact__list-item--before--InsetBlockStart
  • --pf-v6-c-tree-view--m-compact__list-item--nested--before--InsetBlockStart
  • calc(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart * -1)
  • calc(--pf-t--global--spacer--sm * -1)
  • calc(--pf-t--global--spacer--200 * -1)
  • 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--m-compact__list-item--last-child--before--Height
  • --pf-v6-c-tree-view--m-compact__list-item--nested--last-child--before--Height
  • calc(--pf-v6-c-tree-view--m-compact__node--before--InsetBlockStart + --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart)
  • calc(calc(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart + --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart + 0.25rem) + --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--lg + --pf-t--global--spacer--sm + 0.25rem) + --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--400 + --pf-t--global--spacer--200 + 0.25rem) + 0.5rem)
  • 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__node--Color
  • --pf-v6-c-tree-view--m-compact__node--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-tree-view.pf-m-compact--pf-v6-c-tree-view__node--PaddingBlockStart
0
  • --pf-v6-c-tree-view__node--PaddingBlockStart
  • --pf-v6-c-tree-view--m-compact__node--PaddingBlockStart
  • 0
.pf-v6-c-tree-view.pf-m-compact--pf-v6-c-tree-view__node--PaddingBlockEnd
0
  • --pf-v6-c-tree-view__node--PaddingBlockEnd
  • --pf-v6-c-tree-view--m-compact__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__node-container--Display
  • --pf-v6-c-tree-view--m-compact__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__list-item__list-item__node-toggle--InsetBlockStart
  • --pf-v6-c-tree-view--m-compact__list-item__list-item__node-toggle--InsetBlockStart
  • calc(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart)
  • calc(--pf-t--global--spacer--lg)
  • calc(--pf-t--global--spacer--400)
  • 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--m-compact__node-container--PaddingBlockEnd
  • --pf-v6-c-tree-view--m-compact__list-item--m-expanded__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__node--PaddingBlockStart
  • --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 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__node--PaddingBlockEnd
  • --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 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__node--PaddingInlineStart
  • --pf-v6-c-tree-view--m-compact__node--level-2--PaddingInlineStart
  • --pf-v6-c-tree-view--m-compact__node--indent--base
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • 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--m-compact__node-container--PaddingBlockEnd
  • --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd--base
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 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--m-compact__node--before--InsetBlockStart
  • --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart
  • calc(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart + --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart + 0.25rem)
  • calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + 0.25rem)
  • calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + 0.25rem)
  • 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__node--PaddingBlockStart
  • --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--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__node--PaddingBlockEnd
  • --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--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--m-compact--border--InsetInlineStart
  • --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 0.5rem)
  • 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__node--PaddingInlineStart
  • --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 1 + --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base)
  • calc(--pf-t--global--spacer--2xl * 1 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--600 * 1 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(3rem * 1 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(3rem * 1 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(3rem * 1 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(3rem * 1 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact__node-container--nested--BackgroundColor
  • --pf-v6-c-tree-view--m-no-background__node-container--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__node-toggle-icon--Rotate
  • --pf-v6-c-tree-view__node-toggle-icon--base--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__node-toggle--Color
  • --pf-v6-c-tree-view__node-toggle--Color--base
  • --pf-t--global--icon--color--subtle
  • --pf-t--global--icon--color--200
  • --pf-t--color--gray--50
  • #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__list-item__node-toggle--InsetInlineStart
  • --pf-v6-c-tree-view__node--PaddingInlineStart
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • 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__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view__node--nested-indent--base * 1 + --pf-v6-c-tree-view__node--indent--base)
  • calc(calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md) * 1 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300) * 1 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem) * 1 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem) * 1 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem) * 1 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem) * 1 + calc(1rem * 2 + 0.875rem))
  • 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--m-guides--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides--guide-left--base--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - calc(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart + --pf-v6-c-tree-view__node-toggle-icon--MinWidth / 2))
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - calc(--pf-v6-c-tree-view__node--PaddingInlineStart + --pf-t--global--icon--size--font--body--default / 2))
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - calc(--pf-v6-c-tree-view__node--indent--base + --pf-t--global--font--size--body--default / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) + --pf-t--global--font--size--sm / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) + --pf-t--global--font--size--200 / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--sm) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--200) + 0.875rem / 2))
  • 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__node-toggle--Color
  • --pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #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-toggle-icon--Rotate
  • --pf-v6-c-tree-view__list-item--m-expanded__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--Color
  • --pf-v6-c-tree-view__node--m-current--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #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__content--BackgroundColor
  • --pf-v6-c-tree-view__node--m-current--BackgroundColor
  • --pf-t--global--background--color--primary--clicked
  • --pf-t--global--background--color--200
  • --pf-t--color--gray--10
  • #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__list-item__node-toggle--InsetInlineStart
  • --pf-v6-c-tree-view__node--PaddingInlineStart
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • 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__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view__node--nested-indent--base * 2 + --pf-v6-c-tree-view__node--indent--base)
  • calc(calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md) * 2 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300) * 2 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem) * 2 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem) * 2 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem) * 2 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem) * 2 + calc(1rem * 2 + 0.875rem))
  • 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--m-guides--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides--guide-left--base--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - calc(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart + --pf-v6-c-tree-view__node-toggle-icon--MinWidth / 2))
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - calc(--pf-v6-c-tree-view__node--PaddingInlineStart + --pf-t--global--icon--size--font--body--default / 2))
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - calc(--pf-v6-c-tree-view__node--indent--base + --pf-t--global--font--size--body--default / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) + --pf-t--global--font--size--sm / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) + --pf-t--global--font--size--200 / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--sm) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--200) + 0.875rem / 2))
  • 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--m-compact__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact__node--nested-indent--base * 1 + --pf-v6-c-tree-view--m-compact__node--indent--base)
  • calc(--pf-t--global--spacer--lg * 1 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--400 * 1 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(1.5rem * 1 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(1.5rem * 1 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(1.5rem * 1 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(1.5rem * 1 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • 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--m-compact--m-no-background__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 1 + --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base)
  • calc(--pf-t--global--spacer--2xl * 1 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--600 * 1 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(3rem * 1 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(3rem * 1 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(3rem * 1 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(3rem * 1 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--m-no-background--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 0.5rem)
  • 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__list-item__node-toggle--InsetInlineStart
  • --pf-v6-c-tree-view__node--PaddingInlineStart
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • 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__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view__node--nested-indent--base * 3 + --pf-v6-c-tree-view__node--indent--base)
  • calc(calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md) * 3 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300) * 3 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem) * 3 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem) * 3 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem) * 3 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem) * 3 + calc(1rem * 2 + 0.875rem))
  • 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--m-guides--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides--guide-left--base--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - calc(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart + --pf-v6-c-tree-view__node-toggle-icon--MinWidth / 2))
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - calc(--pf-v6-c-tree-view__node--PaddingInlineStart + --pf-t--global--icon--size--font--body--default / 2))
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - calc(--pf-v6-c-tree-view__node--indent--base + --pf-t--global--font--size--body--default / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) + --pf-t--global--font--size--sm / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) + --pf-t--global--font--size--200 / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--sm) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--200) + 0.875rem / 2))
  • 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--m-compact__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact__node--nested-indent--base * 2 + --pf-v6-c-tree-view--m-compact__node--indent--base)
  • calc(--pf-t--global--spacer--lg * 2 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--400 * 2 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(1.5rem * 2 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(1.5rem * 2 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(1.5rem * 2 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(1.5rem * 2 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • 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--m-compact--m-no-background__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 2 + --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base)
  • calc(--pf-t--global--spacer--2xl * 2 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--600 * 2 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(3rem * 2 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(3rem * 2 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(3rem * 2 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(3rem * 2 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--m-no-background--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 0.5rem)
  • 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__list-item__node-toggle--InsetInlineStart
  • --pf-v6-c-tree-view__node--PaddingInlineStart
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • 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__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view__node--nested-indent--base * 4 + --pf-v6-c-tree-view__node--indent--base)
  • calc(calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md) * 4 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300) * 4 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem) * 4 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem) * 4 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem) * 4 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem) * 4 + calc(1rem * 2 + 0.875rem))
  • 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--m-guides--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides--guide-left--base--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - calc(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart + --pf-v6-c-tree-view__node-toggle-icon--MinWidth / 2))
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - calc(--pf-v6-c-tree-view__node--PaddingInlineStart + --pf-t--global--icon--size--font--body--default / 2))
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - calc(--pf-v6-c-tree-view__node--indent--base + --pf-t--global--font--size--body--default / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) + --pf-t--global--font--size--sm / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) + --pf-t--global--font--size--200 / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--sm) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--200) + 0.875rem / 2))
  • 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--m-compact__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact__node--nested-indent--base * 3 + --pf-v6-c-tree-view--m-compact__node--indent--base)
  • calc(--pf-t--global--spacer--lg * 3 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--400 * 3 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(1.5rem * 3 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(1.5rem * 3 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(1.5rem * 3 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(1.5rem * 3 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • 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--m-compact--m-no-background__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 3 + --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base)
  • calc(--pf-t--global--spacer--2xl * 3 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--600 * 3 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(3rem * 3 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(3rem * 3 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(3rem * 3 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(3rem * 3 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--m-no-background--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 0.5rem)
  • 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__list-item__node-toggle--InsetInlineStart
  • --pf-v6-c-tree-view__node--PaddingInlineStart
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • 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__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view__node--nested-indent--base * 5 + --pf-v6-c-tree-view__node--indent--base)
  • calc(calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md) * 5 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300) * 5 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem) * 5 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem) * 5 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem) * 5 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem) * 5 + calc(1rem * 2 + 0.875rem))
  • 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--m-guides--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides--guide-left--base--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - calc(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart + --pf-v6-c-tree-view__node-toggle-icon--MinWidth / 2))
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - calc(--pf-v6-c-tree-view__node--PaddingInlineStart + --pf-t--global--icon--size--font--body--default / 2))
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - calc(--pf-v6-c-tree-view__node--indent--base + --pf-t--global--font--size--body--default / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) + --pf-t--global--font--size--sm / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) + --pf-t--global--font--size--200 / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--sm) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--200) + 0.875rem / 2))
  • 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--m-compact__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact__node--nested-indent--base * 4 + --pf-v6-c-tree-view--m-compact__node--indent--base)
  • calc(--pf-t--global--spacer--lg * 4 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--400 * 4 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(1.5rem * 4 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(1.5rem * 4 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(1.5rem * 4 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(1.5rem * 4 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • 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--m-compact--m-no-background__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 4 + --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base)
  • calc(--pf-t--global--spacer--2xl * 4 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--600 * 4 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(3rem * 4 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(3rem * 4 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(3rem * 4 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(3rem * 4 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--m-no-background--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 0.5rem)
  • 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__list-item__node-toggle--InsetInlineStart
  • --pf-v6-c-tree-view__node--PaddingInlineStart
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • 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__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view__node--nested-indent--base * 6 + --pf-v6-c-tree-view__node--indent--base)
  • calc(calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md) * 6 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300) * 6 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem) * 6 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem) * 6 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem) * 6 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem) * 6 + calc(1rem * 2 + 0.875rem))
  • 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--m-guides--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides--guide-left--base--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - calc(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart + --pf-v6-c-tree-view__node-toggle-icon--MinWidth / 2))
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - calc(--pf-v6-c-tree-view__node--PaddingInlineStart + --pf-t--global--icon--size--font--body--default / 2))
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - calc(--pf-v6-c-tree-view__node--indent--base + --pf-t--global--font--size--body--default / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) + --pf-t--global--font--size--sm / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) + --pf-t--global--font--size--200 / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--sm) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--200) + 0.875rem / 2))
  • 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--m-compact__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact__node--nested-indent--base * 5 + --pf-v6-c-tree-view--m-compact__node--indent--base)
  • calc(--pf-t--global--spacer--lg * 5 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--400 * 5 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(1.5rem * 5 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(1.5rem * 5 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(1.5rem * 5 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(1.5rem * 5 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • 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--m-compact--m-no-background__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 5 + --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base)
  • calc(--pf-t--global--spacer--2xl * 5 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--600 * 5 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(3rem * 5 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(3rem * 5 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(3rem * 5 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(3rem * 5 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--m-no-background--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 0.5rem)
  • 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__list-item__node-toggle--InsetInlineStart
  • --pf-v6-c-tree-view__node--PaddingInlineStart
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • 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__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view__node--nested-indent--base * 7 + --pf-v6-c-tree-view__node--indent--base)
  • calc(calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md) * 7 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300) * 7 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem) * 7 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem) * 7 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem) * 7 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem) * 7 + calc(1rem * 2 + 0.875rem))
  • 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--m-guides--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides--guide-left--base--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - calc(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart + --pf-v6-c-tree-view__node-toggle-icon--MinWidth / 2))
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - calc(--pf-v6-c-tree-view__node--PaddingInlineStart + --pf-t--global--icon--size--font--body--default / 2))
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - calc(--pf-v6-c-tree-view__node--indent--base + --pf-t--global--font--size--body--default / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) + --pf-t--global--font--size--sm / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) + --pf-t--global--font--size--200 / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--sm) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--200) + 0.875rem / 2))
  • 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--m-compact__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact__node--nested-indent--base * 6 + --pf-v6-c-tree-view--m-compact__node--indent--base)
  • calc(--pf-t--global--spacer--lg * 6 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--400 * 6 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(1.5rem * 6 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(1.5rem * 6 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(1.5rem * 6 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(1.5rem * 6 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • 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--m-compact--m-no-background__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 6 + --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base)
  • calc(--pf-t--global--spacer--2xl * 6 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--600 * 6 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(3rem * 6 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(3rem * 6 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(3rem * 6 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(3rem * 6 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--m-no-background--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 0.5rem)
  • 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__list-item__node-toggle--InsetInlineStart
  • --pf-v6-c-tree-view__node--PaddingInlineStart
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • 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__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view__node--nested-indent--base * 8 + --pf-v6-c-tree-view__node--indent--base)
  • calc(calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md) * 8 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300) * 8 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem) * 8 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem) * 8 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem) * 8 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem) * 8 + calc(1rem * 2 + 0.875rem))
  • 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--m-guides--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides--guide-left--base--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - calc(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart + --pf-v6-c-tree-view__node-toggle-icon--MinWidth / 2))
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - calc(--pf-v6-c-tree-view__node--PaddingInlineStart + --pf-t--global--icon--size--font--body--default / 2))
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - calc(--pf-v6-c-tree-view__node--indent--base + --pf-t--global--font--size--body--default / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) + --pf-t--global--font--size--sm / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) + --pf-t--global--font--size--200 / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--sm) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--200) + 0.875rem / 2))
  • 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--m-compact__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact__node--nested-indent--base * 7 + --pf-v6-c-tree-view--m-compact__node--indent--base)
  • calc(--pf-t--global--spacer--lg * 7 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--400 * 7 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(1.5rem * 7 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(1.5rem * 7 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(1.5rem * 7 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(1.5rem * 7 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • 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--m-compact--m-no-background__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 7 + --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base)
  • calc(--pf-t--global--spacer--2xl * 7 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--600 * 7 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(3rem * 7 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(3rem * 7 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(3rem * 7 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(3rem * 7 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--m-no-background--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 0.5rem)
  • 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__list-item__node-toggle--InsetInlineStart
  • --pf-v6-c-tree-view__node--PaddingInlineStart
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • 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__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view__node--nested-indent--base * 9 + --pf-v6-c-tree-view__node--indent--base)
  • calc(calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md) * 9 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300) * 9 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem) * 9 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem) * 9 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem) * 9 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem) * 9 + calc(1rem * 2 + 0.875rem))
  • 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--m-guides--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides--guide-left--base--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - calc(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart + --pf-v6-c-tree-view__node-toggle-icon--MinWidth / 2))
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - calc(--pf-v6-c-tree-view__node--PaddingInlineStart + --pf-t--global--icon--size--font--body--default / 2))
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - calc(--pf-v6-c-tree-view__node--indent--base + --pf-t--global--font--size--body--default / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) + --pf-t--global--font--size--sm / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) + --pf-t--global--font--size--200 / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--sm) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--200) + 0.875rem / 2))
  • 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--m-compact__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact__node--nested-indent--base * 8 + --pf-v6-c-tree-view--m-compact__node--indent--base)
  • calc(--pf-t--global--spacer--lg * 8 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--400 * 8 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(1.5rem * 8 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(1.5rem * 8 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(1.5rem * 8 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(1.5rem * 8 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • 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--m-compact--m-no-background__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 8 + --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base)
  • calc(--pf-t--global--spacer--2xl * 8 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--600 * 8 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(3rem * 8 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(3rem * 8 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(3rem * 8 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(3rem * 8 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--m-no-background--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 0.5rem)
  • 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__list-item__node-toggle--InsetInlineStart
  • --pf-v6-c-tree-view__node--PaddingInlineStart
  • --pf-v6-c-tree-view__node--indent--base
  • calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth)
  • calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--body--default)
  • calc(1rem * 2 + --pf-t--global--font--size--sm)
  • calc(1rem * 2 + --pf-t--global--font--size--200)
  • 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__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view__node--nested-indent--base * 10 + --pf-v6-c-tree-view__node--indent--base)
  • calc(calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md) * 10 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300) * 10 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem) * 10 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem) * 10 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem) * 10 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • calc(calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem) * 10 + calc(1rem * 2 + 0.875rem))
  • 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--m-guides--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-guides--guide-left--base--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - calc(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart + --pf-v6-c-tree-view__node-toggle-icon--MinWidth / 2))
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - calc(--pf-v6-c-tree-view__node--PaddingInlineStart + --pf-t--global--icon--size--font--body--default / 2))
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - calc(--pf-v6-c-tree-view__node--indent--base + --pf-t--global--font--size--body--default / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) + --pf-t--global--font--size--sm / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) + --pf-t--global--font--size--200 / 2))
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--sm) + 0.875rem / 2))
  • calc(calc(1rem * 2 + 0.875rem) - calc(calc(1rem * 2 + --pf-t--global--font--size--200) + 0.875rem / 2))
  • 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--m-compact__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact__node--nested-indent--base * 9 + --pf-v6-c-tree-view--m-compact__node--indent--base)
  • calc(--pf-t--global--spacer--lg * 9 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--400 * 9 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(1.5rem * 9 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(1.5rem * 9 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(1.5rem * 9 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(1.5rem * 9 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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--m-compact--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--md)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--300)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 1rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 1rem)
  • 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--m-compact--m-no-background__node--PaddingInlineStart
  • calc(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base * 9 + --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base)
  • calc(--pf-t--global--spacer--2xl * 9 + --pf-v6-c-tree-view__node--indent--base)
  • calc(--pf-t--global--spacer--600 * 9 + calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth))
  • calc(3rem * 9 + calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default))
  • calc(3rem * 9 + calc(1rem * 2 + --pf-t--global--font--size--body--default))
  • calc(3rem * 9 + calc(1rem * 2 + --pf-t--global--font--size--sm))
  • calc(3rem * 9 + calc(1rem * 2 + --pf-t--global--font--size--200))
  • 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)
  • --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart
  • calc(--pf-v6-c-tree-view__node--PaddingInlineStart - --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset)
  • calc(--pf-v6-c-tree-view__node--indent--base - --pf-t--global--spacer--sm)
  • calc(calc(--pf-t--global--spacer--md * 2 + --pf-v6-c-tree-view__node-toggle-icon--MinWidth) - --pf-t--global--spacer--200)
  • calc(calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--icon--size--font--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--body--default) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--sm) - 0.5rem)
  • calc(calc(1rem * 2 + --pf-t--global--font--size--200) - 0.5rem)
  • calc(calc(1rem * 2 + 0.875rem) - 0.5rem)

Edit this page on GitHub