Dual list selector

A dual list selector displays 2 interactive lists: a list of selected items and a list of available, selectable items. Users can move items between the lists.

Examples

The dual list selector is built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:

<DualListSelector>
  <DualListSelectorPane>
    <DualListSelectorList>
      <DualListSelectorListItem />
    </DualListSelectorList>
  </DualListSelectorPane>

  <DualListSelectorControlsWrapper>
    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
  </DualListSelectorControlsWrapper>

  <DualListSelectorPane isChosen>
    <DualListSelectorList>
      <DualListSelectorListItem />
    </DualListSelectorList>
  </DualListSelectorPane>
</DualListSelector>

Basic

0 of 4 options selected

0 of 0 options selected

Basic with tooltips

0 of 4 options selected

0 of 0 options selected

Basic with search

0 of 4 options selected

0 of 0 options selected

Using more complex options with actions

0 of 4 options selected

0 of 0 options selected

isDisabled

With tree

0 of 7 options selected

0 of 4 options selected

Draggable

To enable drag and drop, wrap the <DualListSelectorList> component with <DragDropSort>, define the variant property as "DualListSelectorList", and pass both the sortable items and onDrop callback to <DragDropSort>. <DragDropSort> will create the component's usual children internally based on the items property, so children inside the <DualListSelectorList> should not be passed to the wrapped component.

Full drag and drop details can be found on the drag and drop component page.

0 of 3 options selected

0 of 4 options selected

Draggable with multiple drop zones

To enable multiple drop zones, wrap the <DualListSelector> component with <DragDropContainer>, and create the desired amount of <Droppable> components within <DragDropContainer>. <Droppable> components should be located where <DualListSelectorList> usually would go for each pane to be made draggable.

Each <Droppable> should define the wrapper property as the component that acts as the drop zone, <DualListSelectorList>, and the items property of their respective draggable items as an array of <DraggableObject> data. <DragDropContainer> should be passed the onDrop, onContainerMove, and onCancel callbacks to handle items being dropped, items moving between droppable containers, and what happens if the drag is cancelled respectively. <DragDropContainer> should also be given a Record representing all sortable drop zones' items. Both components should define the variant property as "DualListSelectorList".

Full drag and drop details can be found on the drag and drop component page.

0 of 3 options selected

0 of 4 options selected

Props

DualListSelector

Acts as a container for all other DualListSelector sub-components when using a composable dual list selector.
*required
Name	Type	Default	Description
children	React.ReactNode	''	Content to be rendered in the dual list selector.
className	string		Additional classes applied to the dual list selector.
id	string		ID of the dual list selector.
isTree	boolean	false	Flag indicating if the dual list selector uses trees instead of simple lists.

DualListSelectorPane

Acts as the container for a list of options that are either available or chosen, depending on the pane type (available or chosen). A search input and other actions, such as sorting, can also be passed into this sub-component.
*required
Name	Type	Default	Description
actions	React.ReactNode[]		Actions to place above the pane.
children	React.ReactNode		A dual list selector list or dual list selector tree to be rendered in the pane.
className	string	''	Additional classes applied to the dual list selector pane.
id	string	getUniqueId('dual-list-selector-pane')	ID of the pane.
isChosen	boolean	false	Flag indicating if this pane is the chosen pane.
isDisabled	boolean	false	Flag indicating whether the component is disabled.
listMinHeight	string		Minimum height of the list of options rendered in the pane. *
onSearch	(event: React.ChangeEvent<HTMLInputElement>) => void		Callback for search input. To be used when isSearchable is true.
searchInput	React.ReactNode		A search input placed above the list at the top of the pane, before actions.
status	string	''	Status to display above the pane.
title	React.ReactNode	''	Title of the pane.

DualListSelectorList

Acts as the container for DualListSelectorListItem sub-components.
*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the dual list selector list.

DualListSelectorListItem

Creates an individual option that can be selected and moved between the dual list selector panes. This is contained within the DualListSelectorList sub-component.
*required
Name	Type	Description
children	React.ReactNode	Content rendered inside the dual list selector.
className	string	Additional classes applied to the dual list selector.
draggableButtonAriaLabel	string	Accessible label for the draggable button on draggable list items.
id	string	ID of the option.
isDisabled	boolean	Flag indicating if the dual list selector is in a disabled state.
isDraggable	boolean	Flag indicating this item is draggable for reordering.
isSelected	boolean	Flag indicating the list item is currently selected.
onOptionSelect	(event: React.MouseEvent \| React.ChangeEvent \| React.KeyboardEvent, id?: string) => void	Callback fired when an option is selected.

DualListSelectorControlsWrapper

Acts as the container for the DualListSelectorControl sub-components.
*required
Name	Type	Description
aria-label	string	Accessible label for the dual list selector controls wrapper.
children	React.ReactNode	Content to be rendered inside of the controls wrapper.
className	string	Additional classes added to the wrapper.

DualListSelectorControl

Renders an individual control button for moving selected options between each dual list selector pane.
*required
Name	Type	Description
aria-label	string	Accessible label for the dual list selector control.
children	React.ReactNode	Content to be rendered in the dual list selector control.
className	string	Additional classes applied to the dual list selector control.
icon	React.ReactNode	Icon to be rendered in the dual list selector control.
isDisabled	boolean	Flag indicating the control is disabled.
onClick	(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	Callback fired when dual list selector control is selected.
tooltipContent	React.ReactNode	Content to be displayed in a tooltip on hover of control.
tooltipProps	any	Additional tooltip properties passed to the tooltip.

DualListSelectorTree

Used in place of the DualListSelectorListItem sub-component when building a composable dual list selector with a tree.
*required
Name	Type	Default	Description
datarequired	DualListSelectorTreeItemData[] \| (() => DualListSelectorTreeItemData[])		Data of the tree view.
defaultAllExpanded	boolean	false	Sets the default expanded behavior.
hasBadges	boolean	false	Flag indicating if all options should have badges.
id	string		ID of the tree view.
isDisabled	boolean	false	Flag indicating if the dual list selector tree is in the disabled state.
onOptionCheck	( event: React.MouseEvent \| React.ChangeEvent<HTMLInputElement> \| React.KeyboardEvent, isChecked: boolean, itemData: DualListSelectorTreeItemData ) => void		Callback fired when an option is checked.

DualListSelectorTreeItemData

*required
Name	Type	Description
idrequired	string	ID of the option.
isCheckedrequired	boolean	Checked state of the option.
textrequired	string	Text of the option.
badgeProps	any	Additional properties to pass to the option badge.
checkProps	any	Additional properties to pass to the option checkbox.
children	DualListSelectorTreeItemData[]	Content rendered inside the dual list selector.
className	string	Additional classes applied to the dual list selector.
defaultExpanded	boolean	Flag indicating this option is expanded by default.
hasBadge	boolean	Flag indicating this option has a badge.
isDisabled	boolean	Flag indicating whether the component is disabled.
onOptionCheck	( event: React.MouseEvent \| React.ChangeEvent<HTMLInputElement> \| React.KeyboardEvent, isChecked: boolean, isChosen: boolean, itemData: DualListSelectorTreeItemData ) => void	Callback fired when an option is checked.
parentId	string	Parent ID of an option.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__header--GridArea	pane-header
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__tools--GridArea	pane-tools
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__status--GridArea	pane-status
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__menu--GridArea	pane-menu
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__controls--GridArea	controls
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector--m-chosen__header--GridArea	pane-header-c
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector--m-chosen__tools--GridArea	pane-tools-c
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector--m-chosen__status--GridArea	pane-status-c
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector--m-chosen__menu--GridArea	pane-menu-c
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min	12.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max	28.125rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__header--MarginBlockEnd	0.5rem
--pf-v6-c-dual-list-selector__header--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__title-text--FontWeight	500
--pf-v6-c-dual-list-selector__title-text--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__title-text--FontSize	1rem
--pf-v6-c-dual-list-selector__title-text--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__tools--MarginBlockEnd	1rem
--pf-v6-c-dual-list-selector__tools--MarginBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginInlineStart	0.5rem
--pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__menu--BorderWidth	1px
--pf-v6-c-dual-list-selector__menu--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__menu--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-dual-list-selector__menu--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__menu--BorderRadius	6px
--pf-v6-c-dual-list-selector__menu--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__menu--MinHeight	12.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__menu--MaxHeight	20rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__menu--MarginBlockStart	1rem
--pf-v6-c-dual-list-selector__menu--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item-row--FontSize	0.875rem
--pf-v6-c-dual-list-selector__list-item-row--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-t--global--background--color--action--plain--default rgba(255, 255, 255, 0.0000)
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor --pf-t--global--background--color--primary--clicked --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor	(In light theme) rgba(199, 199, 199, 0.2500)
--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgba(199, 199, 199, 0.2500)
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item--m-ghost-row--Opacity	.4
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item--PaddingBlockStart	0.5rem
--pf-v6-c-dual-list-selector__item--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item--PaddingInlineEnd	1rem
--pf-v6-c-dual-list-selector__item--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item--PaddingBlockEnd	0.5rem
--pf-v6-c-dual-list-selector__item--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	1rem
--pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart	1rem
--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item--indent--base	calc(1rem + 0.5rem + 0.875rem)
--pf-v6-c-dual-list-selector__item--indent--base calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) calc(1rem + 0.5rem + --pf-t--global--font--size--200) calc(1rem + 0.5rem + 0.875rem)
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item--nested-indent--base	calc(calc(1rem + 0.5rem + 0.875rem) - 1rem)
--pf-v6-c-dual-list-selector__item--nested-indent--base calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) calc(calc(1rem + 0.5rem + 0.875rem) - 1rem)
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart	0.25rem
--pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item-text--Color	(In light theme) #4d4d4d
--pf-v6-c-dual-list-selector__item-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color	(In light theme) #151515
--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color	(In light theme) #a3a3a3
--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__status--MarginBlockEnd	0.5rem
--pf-v6-c-dual-list-selector__status--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__status-text--FontSize	0.875rem
--pf-v6-c-dual-list-selector__status-text--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__status-text--Color	(In light theme) #4d4d4d
--pf-v6-c-dual-list-selector__status-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__controls--PaddingInlineEnd	1rem
--pf-v6-c-dual-list-selector__controls--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__controls--PaddingInlineStart	1rem
--pf-v6-c-dual-list-selector__controls--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__controls--Gap	0.25rem
--pf-v6-c-dual-list-selector__controls--Gap --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__controls--MarginBlockStart	1rem
--pf-v6-c-dual-list-selector__controls--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd	0.5rem
--pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	0
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX	-100%
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item-check--MarginInlineEnd	0.5rem
--pf-v6-c-dual-list-selector__item-check--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item-count--MarginInlineStart	0.5rem
--pf-v6-c-dual-list-selector__item-count--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor	(In light theme) #e0e0e0
--pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate	0
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate	90deg
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration	200ms
--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration --pf-t--global--motion--duration--icon--long --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-dual-list-selector__item-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-dual-list-selector	--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth	0.875rem
--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth --pf-v6-c-dual-list-selector__list-item-row--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color	(In light theme) #a3a3a3
--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-dual-list-selector__pane.pf-m-chosen	--pf-v6-c-dual-list-selector__header--GridArea	pane-header-c
--pf-v6-c-dual-list-selector__header--GridArea --pf-v6-c-dual-list-selector--m-chosen__header--GridArea pane-header-c
	.pf-v6-c-dual-list-selector__pane.pf-m-chosen	--pf-v6-c-dual-list-selector__tools--GridArea	pane-tools-c
--pf-v6-c-dual-list-selector__tools--GridArea --pf-v6-c-dual-list-selector--m-chosen__tools--GridArea pane-tools-c
	.pf-v6-c-dual-list-selector__pane.pf-m-chosen	--pf-v6-c-dual-list-selector__status--GridArea	pane-status-c
--pf-v6-c-dual-list-selector__status--GridArea --pf-v6-c-dual-list-selector--m-chosen__status--GridArea pane-status-c
	.pf-v6-c-dual-list-selector__pane.pf-m-chosen	--pf-v6-c-dual-list-selector__menu--GridArea	pane-menu-c
--pf-v6-c-dual-list-selector__menu--GridArea --pf-v6-c-dual-list-selector--m-chosen__menu--GridArea pane-menu-c
	.pf-v6-c-dual-list-selector__list	--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate	0
	.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list	--pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart	0
	.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list	--pf-v6-c-dual-list-selector__item-toggle--MarginBlockEnd	0
	.pf-v6-c-dual-list-selector__list-item:focus	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-dual-list-selector__list-item.pf-m-expandable	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	1rem
--pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item.pf-m-expanded	--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate	90deg
--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate 90deg
	.pf-v6-c-dual-list-selector__list-item.pf-m-disabled	--pf-v6-c-dual-list-selector__item-text--Color	(In light theme) #a3a3a3
--pf-v6-c-dual-list-selector__item-text--Color --pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-dual-list-selector__list-item.pf-m-disabled	--pf-v6-c-dual-list-selector__item-toggle-icon--Color	(In light theme) #a3a3a3
--pf-v6-c-dual-list-selector__item-toggle-icon--Color --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor --pf-t--global--background--color--primary--clicked --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected .pf-v6-c-dual-list-selector__item-text	--pf-v6-c-dual-list-selector__item-text--Color	(In light theme) #151515
--pf-v6-c-dual-list-selector__item-text--Color --pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-dual-list-selector__list-item-row:hover	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-dual-list-selector__list-item-row.pf-m-check	--pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor	transparent
	.pf-v6-c-dual-list-selector__list-item-row.pf-m-ghost-row	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) rgba(199, 199, 199, 0.2500)
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgba(199, 199, 199, 0.2500)
	.pf-v6-c-dual-list-selector__draggable + .pf-v6-c-dual-list-selector__item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	0.25rem
--pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-dual-list-selector__draggable .pf-v6-c-button	--pf-v6-c-button--FontSize	inherit
	.pf-v6-c-dual-list-selector__item-count .pf-v6-c-badge.pf-m-read	--pf-v6-c-badge--m-read--BackgroundColor	(In light theme) #e0e0e0
--pf-v6-c-badge--m-read--BackgroundColor --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 1 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 1 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 1 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 1 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 2 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 2 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 2 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 2 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 3 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 3 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 3 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 3 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 4 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 4 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 4 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 4 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 5 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 5 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 5 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 5 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 6 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 6 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 6 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 6 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 7 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 7 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 7 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 7 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 8 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 8 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 8 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 8 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 9 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 9 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 9 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 9 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))
--pf-v6-c-dual-list-selector__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 10 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 10 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 10 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 10 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem)) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))
	.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item	--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart	1rem
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem

Edit this page on GitHub