Dual list selector

A dual list selector allows users to select and move items from one list of available items to another list of selected items. Unlike a select list, a dual list selector separates the available options and the selected options into two separate lists, which allows users to easily scan the items they selected.

Examples

Basic

0 of 4 items selected

0 of 0 items selected

Basic with tooltips

0 of 4 items selected

0 of 0 items selected

Basic with search

0 of 4 items selected

0 of 0 items selected

Using more complex options with actions

0 of 4 items selected

0 of 0 items selected

isDisabled

With tree

0 of 7 items selected

0 of 4 items selected

Composable structure

The dual list selector can also be 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>

Composable dual list selector

0 of 7 options selected

0 of 0 options selected

Composable with drag and drop

This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:

wrap the DualListSelectorPane in a DragDrop component
wrap the DualListSelectorList in a Droppable component
wrap the DualListSelectorListItem components in a Draggable component
define an onDrop callback which reorders the sortable options.
- The onDrop function provides the starting location and destination location for a dragged item. It should return true to enable the 'drop' animation in the new location and false to enable the 'drop' animation back to the item's old position.
- define an onDrag callback which ensures that the drag event will not cross hairs with the onOptionSelect click event set on the option. Note: the ignoreNextOptionSelect state value is used to prevent selection while dragging.

Note: Keyboard accessibility and screen reader accessibility for the DragDrop component are still in development.

0 of 3 options selected

0 of 4 options selected

Composable with tree

0 of 7 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
addAll	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void		Optional callback for the dynamically built add all button
addAllAriaLabel	string	'Add all'	Accessible label for the dynamically built add all button
addAllTooltip	React.ReactNode		Tooltip content for the dynamically built add all button
addAllTooltipProps	any		Additonal tooltip properties for the dynamically built add all tooltip
addSelected	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void		Optional callback for the dynamically built add selected button
addSelectedAriaLabel	string	'Add selected'	Accessible label for the dynamically built add selected button
addSelectedTooltip	React.ReactNode		Tooltip content for the dynamically built add selected button
addSelectedTooltipProps	any		Additonal tooltip properties for the dynamically built add selected tooltip
availableOptions	React.ReactNode[] \| DualListSelectorTreeItemData[]	[]	Options to display in the dynamically built available options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.
availableOptionsActions	React.ReactNode[]		Actions to be displayed above the dynamically built available options pane.
availableOptionsSearchAriaLabel	string	'Available search input'	Accessible label for the search input on the dynamically built available options pane.
availableOptionsStatus	string		Status message to display above the dynamically built available options pane.
availableOptionsTitle	string	'Available options'	Title applied to the dynamically built available options pane.
children	React.ReactNode	''	Content to be rendered in the dual list selector. Panes & controls will not be built dynamically when children are provided.
chosenOptions	React.ReactNode[] \| DualListSelectorTreeItemData[]	[]	Options to display in the dynamically built chosen options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.
chosenOptionsActions	React.ReactNode[]		Actions to be displayed above the dynamically built chosen options pane.
chosenOptionsSearchAriaLabel	string	'Chosen search input'	Accessible label for the search input on the dynamically built chosen options pane.
chosenOptionsStatus	string		Status message to display above the dynamically built chosen options pane.
chosenOptionsTitle	string	'Chosen options'	Title applied to the dynamically built chosen options pane.
className	string		Additional classes applied to the dual list selector.
controlsAriaLabel	string	'Selector controls'	Accessible label for the dynamically built controls between the two panes.
filterOption	(option: React.ReactNode, input: string) => boolean		Optional filter function for custom filtering based on search string. Used with a dynamically built search input.
id	string		Id of the dual list selector.
isDisabled	boolean	false	Flag indicating if the dual list selector is in a disabled state
isSearchable	boolean		Flag indicating a search bar should be included above both the dynamically built available and chosen panes.
isTree	boolean	false	Flag indicating if the dual list selector uses trees instead of simple lists
onAvailableOptionsSearchInputChanged	(value: string, event: React.FormEvent<HTMLInputElement>) => void		A callback for when the search input value for the dynamically built available options changes.
onChosenOptionsSearchInputChanged	(value: string, event: React.FormEvent<HTMLInputElement>) => void		A callback for when the search input value for the dynamically built chosen options changes.
onListChange	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void		Callback fired every time dynamically built options are chosen or removed
onOptionCheck	( e: React.MouseEvent \| React.ChangeEvent<HTMLInputElement> \| React.KeyboardEvent, checked: boolean, checkedId: string, newCheckedItems: string[] ) => void		Optional callback fired when a dynamically built option is checked
onOptionSelect	( e: React.MouseEvent \| React.ChangeEvent \| React.KeyboardEvent, index: number, isChosen: boolean, id: string, itemData: any, parentData: any ) => void		Optional callback fired when a dynamically built option is selected
removeAll	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void		Optional callback for the dynamically built remove all button
removeAllAriaLabel	string	'Remove all'	Accessible label for the dynamically built remove all button
removeAllTooltip	React.ReactNode		Tooltip content for the dynamically built remove all button
removeAllTooltipProps	any		Additonal tooltip properties for the dynamically built remove all tooltip
removeSelected	(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void		Optional callback for the dynamically built remove selected button
removeSelectedAriaLabel	string	'Remove selected'	Accessible label for the dynamically built remove selected button
removeSelectedTooltip	React.ReactNode		Tooltip content for the dynamically built remove selected button
removeSelectedTooltipProps	any		Additonal tooltip properties for the dynamically built remove selected tooltip

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 reordring
isSelected	boolean	Flag indicating the list item is currently selected.
onOptionSelect	(e: 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	Anything that can be rendered inside of the 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.
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


	.pf-c-dual-list-selector	--pf-c-dual-list-selector__header--GridArea	pane-header
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__tools--GridArea	pane-tools
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__status--GridArea	pane-status
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__menu--GridArea	pane-menu
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__controls--GridArea	controls
	.pf-c-dual-list-selector	--pf-c-dual-list-selector--m-chosen__header--GridArea	pane-header-c
	.pf-c-dual-list-selector	--pf-c-dual-list-selector--m-chosen__tools--GridArea	pane-tools-c
	.pf-c-dual-list-selector	--pf-c-dual-list-selector--m-chosen__status--GridArea	pane-status-c
	.pf-c-dual-list-selector	--pf-c-dual-list-selector--m-chosen__menu--GridArea	pane-menu-c
	.pf-c-dual-list-selector	--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min	12.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max	28.125rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__header--MarginBottom	0.5rem
--pf-c-dual-list-selector__header--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__title-text--FontWeight	700
--pf-c-dual-list-selector__title-text--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 700
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__tools--MarginBottom	1rem
--pf-c-dual-list-selector__tools--MarginBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__tools-filter--tools-actions--MarginLeft	0.5rem
--pf-c-dual-list-selector__tools-filter--tools-actions--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__menu--BorderWidth	1px
--pf-c-dual-list-selector__menu--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__menu--BorderColor	#d2d2d2
--pf-c-dual-list-selector__menu--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__menu--MinHeight	12.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__menu--MaxHeight	20rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item-row--FontSize	0.875rem
--pf-c-dual-list-selector__list-item-row--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item-row--BackgroundColor	transparent
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor	#f0f0f0
--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor	#f0f0f0
--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor	#f0f0f0
--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor	#fff
--pf-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item--m-ghost-row--Opacity	.4
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--PaddingTop	0.5rem
--pf-c-dual-list-selector__item--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--PaddingRight	1rem
--pf-c-dual-list-selector__item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--PaddingBottom	0.5rem
--pf-c-dual-list-selector__item--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--PaddingLeft	1rem
--pf-c-dual-list-selector__item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--m-expandable--PaddingLeft	0
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--indent--base	calc(1rem + 0.5rem + 0.875rem)
--pf-c-dual-list-selector__item--indent--base calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) calc(1rem + 0.5rem + 0.875rem)
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--nested-indent--base	calc(calc(1rem + 0.5rem + 0.875rem) - 1rem)
--pf-c-dual-list-selector__item--nested-indent--base calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) calc(calc(1rem + 0.5rem + 0.875rem) - 1rem)
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__draggable--item--PaddingLeft	0.25rem
--pf-c-dual-list-selector__draggable--item--PaddingLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-text--Color	#151515
--pf-c-dual-list-selector__item-text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item-row--m-selected__text--Color	#06c
--pf-c-dual-list-selector__list-item-row--m-selected__text--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item-row--m-selected__text--FontWeight	700
--pf-c-dual-list-selector__list-item-row--m-selected__text--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 700
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item--m-disabled__item-text--Color	#6a6e73
--pf-c-dual-list-selector__list-item--m-disabled__item-text--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__status--MarginBottom	0.5rem
--pf-c-dual-list-selector__status--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__status-text--FontSize	0.875rem
--pf-c-dual-list-selector__status-text--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__status-text--Color	#6a6e73
--pf-c-dual-list-selector__status-text--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__controls--PaddingRight	1rem
--pf-c-dual-list-selector__controls--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__controls--PaddingLeft	1rem
--pf-c-dual-list-selector__controls--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle--PaddingTop	0.5rem
--pf-c-dual-list-selector__item-toggle--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle--PaddingRight	0.5rem
--pf-c-dual-list-selector__item-toggle--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle--PaddingBottom	0.5rem
--pf-c-dual-list-selector__item-toggle--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle--PaddingLeft	1rem
--pf-c-dual-list-selector__item-toggle--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle--MarginTop	calc(0.5rem * -1)
--pf-c-dual-list-selector__item-toggle--MarginTop calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle--MarginBottom	calc(0.5rem * -1)
--pf-c-dual-list-selector__item-toggle--MarginBottom calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list__list__item-toggle--Left	0
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list__list__item-toggle--TranslateX	-100%
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-check--MarginRight	0.5rem
--pf-c-dual-list-selector__item-check--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-count--Marginleft	0.5rem
--pf-c-dual-list-selector__item-count--Marginleft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item--c-badge--m-read--BackgroundColor	#d2d2d2
--pf-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle-icon--Rotate	0
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate	90deg
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle-icon--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-dual-list-selector__item-toggle-icon--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__item-toggle-icon--MinWidth	0.875rem
--pf-c-dual-list-selector__item-toggle-icon--MinWidth --pf-c-dual-list-selector__list-item-row--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-dual-list-selector	--pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color	#d2d2d2
--pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-dual-list-selector__pane.pf-m-chosen	--pf-c-dual-list-selector__header--GridArea	pane-header-c
--pf-c-dual-list-selector__header--GridArea --pf-c-dual-list-selector--m-chosen__header--GridArea pane-header-c
	.pf-c-dual-list-selector__pane.pf-m-chosen	--pf-c-dual-list-selector__tools--GridArea	pane-tools-c
--pf-c-dual-list-selector__tools--GridArea --pf-c-dual-list-selector--m-chosen__tools--GridArea pane-tools-c
	.pf-c-dual-list-selector__pane.pf-m-chosen	--pf-c-dual-list-selector__status--GridArea	pane-status-c
--pf-c-dual-list-selector__status--GridArea --pf-c-dual-list-selector--m-chosen__status--GridArea pane-status-c
	.pf-c-dual-list-selector__pane.pf-m-chosen	--pf-c-dual-list-selector__menu--GridArea	pane-menu-c
--pf-c-dual-list-selector__menu--GridArea --pf-c-dual-list-selector--m-chosen__menu--GridArea pane-menu-c
	.pf-c-dual-list-selector__list	--pf-c-dual-list-selector__item-toggle-icon--Rotate	0
	.pf-c-dual-list-selector__list .pf-c-dual-list-selector__list	--pf-c-dual-list-selector__item-toggle--MarginTop	0
	.pf-c-dual-list-selector__list .pf-c-dual-list-selector__list	--pf-c-dual-list-selector__item-toggle--MarginBottom	0
	.pf-c-dual-list-selector__list-item:focus	--pf-c-dual-list-selector__list-item-row--BackgroundColor	#f0f0f0
--pf-c-dual-list-selector__list-item-row--BackgroundColor --pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-dual-list-selector__list-item.pf-m-expandable	--pf-c-dual-list-selector__item--PaddingLeft	0
--pf-c-dual-list-selector__item--PaddingLeft --pf-c-dual-list-selector__item--m-expandable--PaddingLeft 0
	.pf-c-dual-list-selector__list-item.pf-m-expanded	--pf-c-dual-list-selector__item-toggle-icon--Rotate	90deg
--pf-c-dual-list-selector__item-toggle-icon--Rotate --pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate 90deg
	.pf-c-dual-list-selector__list-item.pf-m-disabled	--pf-c-dual-list-selector__item-text--Color	#6a6e73
--pf-c-dual-list-selector__item-text--Color --pf-c-dual-list-selector__list-item--m-disabled__item-text--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-dual-list-selector__list-item.pf-m-disabled	--pf-c-dual-list-selector__item-toggle-icon--Color	#d2d2d2
--pf-c-dual-list-selector__item-toggle-icon--Color --pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-dual-list-selector__list-item-row:hover	--pf-c-dual-list-selector__list-item-row--BackgroundColor	#f0f0f0
--pf-c-dual-list-selector__list-item-row--BackgroundColor --pf-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-dual-list-selector__list-item-row.pf-m-selected	--pf-c-dual-list-selector__list-item-row--BackgroundColor	#f0f0f0
--pf-c-dual-list-selector__list-item-row--BackgroundColor --pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-dual-list-selector__list-item-row.pf-m-selected .pf-c-dual-list-selector__item-text	--pf-c-dual-list-selector__item-text--Color	#06c
--pf-c-dual-list-selector__item-text--Color --pf-c-dual-list-selector__list-item-row--m-selected__text--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-dual-list-selector__list-item-row.pf-m-check	--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor	transparent
	.pf-c-dual-list-selector__list-item-row.pf-m-ghost-row	--pf-c-dual-list-selector__list-item-row--BackgroundColor	#fff
--pf-c-dual-list-selector__list-item-row--BackgroundColor --pf-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-dual-list-selector__draggable + .pf-c-dual-list-selector__item	--pf-c-dual-list-selector__item--PaddingLeft	0.25rem
--pf-c-dual-list-selector__item--PaddingLeft --pf-c-dual-list-selector__draggable--item--PaddingLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-dual-list-selector__draggable .pf-c-button	--pf-c-button--FontSize	inherit
	.pf-c-dual-list-selector__item-count .pf-c-badge.pf-m-read	--pf-c-badge--m-read--BackgroundColor	#d2d2d2
--pf-c-badge--m-read--BackgroundColor --pf-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 1 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 1 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 1 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 1 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 1 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 1 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 1 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 1 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 1 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 1 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 1 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 1 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 2 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 2 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 2 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 2 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 2 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 2 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 2 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 2 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 2 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 2 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 2 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 2 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 3 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 3 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 3 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 3 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 3 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 3 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 3 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 3 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 3 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 3 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 3 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 3 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 4 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 4 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 4 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 4 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 4 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 4 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 4 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 4 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 4 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 4 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 4 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 4 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 5 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 5 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 5 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 5 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 5 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 5 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 5 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 5 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 5 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 5 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 5 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 5 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 6 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 6 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 6 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 6 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 6 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 6 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 6 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 6 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 6 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 6 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 6 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 6 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 7 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 7 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 7 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 7 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 7 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 7 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 7 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 7 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 7 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 7 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 7 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 7 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 8 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 8 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 8 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 8 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 8 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 8 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 8 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 8 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 8 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 8 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 8 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 8 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 9 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 9 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 9 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 9 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 9 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 9 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 9 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 9 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 9 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 9 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 9 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 9 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__item--PaddingLeft	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 10 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 10 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 10 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 10 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 10 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 10 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))
	.pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item	--pf-c-dual-list-selector__list__list__item-toggle--Left	calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))
--pf-c-dual-list-selector__list__list__item-toggle--Left --pf-c-dual-list-selector__item--PaddingLeft calc(--pf-c-dual-list-selector__item--nested-indent--base * 10 + --pf-c-dual-list-selector__item--indent--base) calc(calc(--pf-c-dual-list-selector__item--indent--base - --pf-global--spacer--md) * 10 + calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-global--spacer--md + --pf-global--spacer--sm + --pf-c-dual-list-selector__list-item-row--FontSize) - $pf-global--spacer--md) * 10 + calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + --pf-global--FontSize--sm) - $pf-global--spacer--md) * 10 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm) - $pf-global--spacer--md) * 10 + calc($pf-global--spacer--md + $pf-global--spacer--sm + $pf-global--FontSize--sm)) calc(calc(calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px)) - pf-size-prem(16px)) * 10 + calc(pf-size-prem(16px) + pf-size-prem(8px) + pf-font-prem(14px))) calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines