.pf-v6-c-table { --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-table--border-width--base: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table__caption--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-table__caption--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-table__caption--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table__caption--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-table__caption--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-table__tr--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table__tr--BorderBlockEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-table--cell--Padding--base: var(--pf-t--global--spacer--md); --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table--cell--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-table--cell--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-table--cell--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table--cell--MinWidth: calc(var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineEnd)); --pf-v6-c-table--cell--MaxWidth: none; --pf-v6-c-table--cell--Width: auto; --pf-v6-c-table--cell--Overflow: visible; --pf-v6-c-table--cell--TextOverflow: clip; --pf-v6-c-table--cell--WhiteSpace: normal; --pf-v6-c-table--cell--WordBreak: normal; --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartColor: var(--pf-t--global--border--color--default); --pf-v6-c-table--cell--m-help--MinWidth: 11ch; --pf-v6-c-table--m-truncate--cell--MaxWidth: 1px; --pf-v6-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineStart)); --pf-v6-c-table__text--MinWidth: 100%; --pf-v6-c-table__text--m-truncate--MinWidth: 5ch; --pf-v6-c-table--m-truncate__text--MinWidth: 5ch; --pf-v6-c-table--cell--hidden-visible--Display: table-cell; --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 0; --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg; --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__button--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-table__button--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table__button--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-table__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-table__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1); --pf-v6-c-table__button--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-table__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-table__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--action--plain--default); --pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-table__check--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__check--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-table--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-table__favorite--m-favorited--c-button--Color: var(--pf-t--global--color--favorite--clicked); --pf-v6-c-table__tr--m-ghost-row--Opacity: .4; --pf-v6-c-table__tr--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s; --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s; --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-table__expandable-row--Opacity: 0; --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1; --pf-v6-c-table__expandable-row--TranslateY: 0; --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0; } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-table { --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-table__expandable-row--TranslateY: -.5rem; } } .pf-v6-c-table { --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-table__expandable-row-content--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-table__expandable-row-content--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-table__expandable-row-content--BorderWidth: 0; --pf-v6-c-table__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-table__control-row--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table__control-row__tbody--BorderBlockEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-table__icon-inline--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__sort--MinWidth: calc(6ch + var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineStart) + var(--pf-v6-c-table__sort-indicator--MarginInlineStart)); --pf-v6-c-table__sort--m-selected__button--Color: var(--pf-t--global--color--brand--clicked); --pf-v6-c-table__sort--m-help--MinWidth: 15ch; --pf-v6-c-table__sort__button__text--Color: currentcolor; --pf-v6-c-table__sort__button--hover__text--Color: currentcolor; --pf-v6-c-table__sort-indicator--Color: var(--pf-t--global--icon--color--subtle); --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-table__sort--m-selected__sort-indicator--Color: var(--pf-t--global--color--brand--clicked); --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-table__th--m-help--MinWidth: 11ch; --pf-v6-c-table__column-help--MarginInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: transparent; --pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover); --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover); --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit; --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0; --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0; --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong); --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-table--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs)); --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-compact--cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent; --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover); --pf-v6-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); --pf-v6-c-table__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table__tbody--m-clickable--BackgroundColor: transparent; --pf-v6-c-table__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover); --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base); --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor); --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: initial; --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem; --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain)); --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2)); --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default); --pf-v6-c-table--m-sticky-header--BackgroundColor: var(--pf-t--global--background--color--sticky--default); --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1); --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2); --pf-v6-c-table--m-sticky-header--BorderRadius: 0; --pf-v6-c-table--m-sticky-header--BoxShadow: 0; --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base); --pf-v6-c-table--m-sticky-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor); --pf-v6-c-table--m-sticky-header--BorderRadius--glass: var(--pf-t--global--border--radius--medium); --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm); --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1); --pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2); } :where(.pf-v6-theme-glass) .pf-v6-c-table { --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0; --pf-v6-c-table--m-sticky-header--BoxShadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow--glass); --pf-v6-c-table--m-sticky-header--BorderRadius: var(--pf-v6-c-table--m-sticky-header--BorderRadius--glass); } .pf-v6-c-table { width: 100%; background-color: var(--pf-v6-c-table--BackgroundColor); } :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-table.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass) { --pf-v6-c-table--BackgroundColor: transparent; --pf-v6-c-table__expandable-row-content--BackgroundColor: transparent; --pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0; --pf-v6-c-table__expandable-row-content--PaddingInlineEnd: 0; --pf-v6-c-table__control-row--BackgroundColor: transparent; } .pf-v6-c-table.pf-m-fixed { table-layout: fixed; } .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th::after { opacity: 0; transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor); transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor); transition-property: opacity; } .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead .pf-v6-c-table__th::after { opacity: 1; } .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base { position: relative; } .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead { position: sticky; inset-block-start: 0; z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex); } .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after { position: absolute; inset: 0; z-index: -1; pointer-events: none; content: ""; border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius); box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow); } .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead .pf-v6-c-table__th::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th::after { position: absolute; inset: 0; z-index: -1; pointer-events: none; content: ""; background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor); border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor); } .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead .pf-v6-c-table__th:first-child::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th:first-child::after { border-start-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius); border-end-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius); } .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead .pf-v6-c-table__th:last-child::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th:last-child::after { border-start-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius); border-end-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius); } .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead > :where(th, td), .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead > :where(th, td) { z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex); } :where(.pf-v6-theme-glass) .pf-v6-c-table.pf-m-sticky-header .pf-m-nested-column-header, :where(.pf-v6-theme-glass) .pf-v6-c-table.pf-m-sticky-header-base .pf-m-nested-column-header { --pf-v6-c-table--m-sticky-header--BorderRadius: 0; --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0; } .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) { border-block-end: 0; } .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) th:where(.pf-v6-c-table__th):not([rowspan]), .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) { --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd); } .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot { position: sticky; inset-block-end: 0; z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex); background: var(--pf-v6-c-table--BackgroundColor); } .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before { position: absolute; inset: 0; z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex); pointer-events: none; content: ""; border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor); } .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type { border-block-end: 0; } .pf-v6-c-table.pf-m-plain { --pf-v6-c-table--BackgroundColor: transparent; } .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr), .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd), .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even), .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-striped { --pf-v6-c-table__sticky-column--BackgroundColor: var(--pf-v6-c-table--m-striped__tr--BackgroundColor); background: var(--pf-v6-c-table--m-striped__tr--BackgroundColor); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row).pf-m-ghost-row { background-color: var(--pf-v6-c-table__tr--m-ghost-row--BackgroundColor); opacity: var(--pf-v6-c-table__tr--m-ghost-row--Opacity); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) { --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-table--cell--hidden-visible--Display); --pf-v6-hidden-visible--hidden--Display: none; --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); display: var(--pf-v6-hidden-visible--Display); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } @media screen and (min-width: 36rem) { .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 48rem) { .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 62rem) { .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 75rem) { .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 90.625rem) { .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) { position: relative; width: var(--pf-v6-c-table--cell--Width); min-width: var(--pf-v6-c-table--cell--MinWidth); max-width: var(--pf-v6-c-table--cell--MaxWidth); padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart); padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd); overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); font-size: var(--pf-v6-c-table--cell--FontSize); font-weight: var(--pf-v6-c-table--cell--FontWeight); line-height: var(--pf-v6-c-table--cell--LineHeight); color: var(--pf-v6-c-table--cell--Color); word-break: var(--pf-v6-c-table--cell--WordBreak); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child { padding-inline-start: var(--pf-v6-c-table--cell--first-last-child--PaddingInline); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child { padding-inline-end: var(--pf-v6-c-table--cell--first-last-child--PaddingInline); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-center { text-align: center; } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):is(:empty, .pf-v6-c-table__cell-empty) { width: auto; min-width: 0; padding: 0; } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-help { --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--cell--m-help--MinWidth); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-favorite { --pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--m-favorite--Color); --pf-v6-c-table__sort--MinWidth: fit-content; --pf-v6-c-table--cell--MaxWidth: fit-content; --pf-v6-c-table--cell--Overflow: visible; } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-border-right::before, .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-border-left::before { position: absolute; inset: 0; pointer-events: none; content: ""; } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-border-right::before { border-inline-end: var(--pf-v6-c-table--cell--m-border-right--before--BorderInlineEndWidth) solid var(--pf-v6-c-table--cell--m-border-right--before--BorderInlineEndColor); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-border-left::before { border-inline-start: var(--pf-v6-c-table--cell--m-border-left--before--BorderInlineStartWidth) solid var(--pf-v6-c-table--cell--m-border-left--before--BorderInlineStartColor); } .pf-v6-c-table caption:where(.pf-v6-c-table__caption) { padding-block-start: var(--pf-v6-c-table__caption--PaddingBlockStart); padding-block-end: var(--pf-v6-c-table__caption--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table__caption--PaddingInlineStart); font-size: var(--pf-v6-c-table__caption--FontSize); color: var(--pf-v6-c-table__caption--Color); text-align: start; background-color: var(--pf-v6-c-table--BackgroundColor); } .pf-v6-c-table thead:where(.pf-v6-c-table__thead) { --pf-v6-c-table--cell--FontSize: var(--pf-v6-c-table__thead--cell--FontSize); --pf-v6-c-table--cell--FontWeight: var(--pf-v6-c-table__thead--cell--FontWeight); --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth); --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth); --pf-v6-c-table--cell--Overflow: hidden; --pf-v6-c-table--cell--TextOverflow: ellipsis; --pf-v6-c-table--cell--WhiteSpace: nowrap; } .pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__sort .pf-v6-c-table__button { margin-block-end: calc(var(--pf-v6-c-table__button--PaddingBlockEnd) * -1); } .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) { outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset); } .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:first-child) th:where(.pf-v6-c-table__th):not([rowspan]), .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:first-child) td:where(.pf-v6-c-table__td):not([rowspan]) { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart); } .pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__subhead { --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__subhead--Color); color: var(--pf-v6-c-table__subhead--Color); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__tbody--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__tbody--cell--PaddingBlockEnd); --pf-v6-c-table--cell--FontSize: var(--pf-v6-c-table__tbody--cell--FontSize); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :where(th, td) { overflow-wrap: break-word; } .pf-v6-c-table .pf-v6-c-table__td.pf-m-action { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__td--m-action--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__td--m-action--PaddingBlockEnd); } .pf-v6-c-table .pf-v6-c-table__sort { min-width: var(--pf-v6-c-table__sort--MinWidth); } .pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td).pf-m-help { min-width: var(--pf-v6-c-table__th--m-help--MinWidth); } .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) { --pf-v6-c-table__tr--BorderBlockEndWidth: 0; --pf-v6-c-table__tbody--BorderBlockEndWidth: 0; --pf-v6-c-table--m-expandable__tbody--BorderBlockEndWidth: 0; --pf-v6-c-table__control-row--BorderBlockEndWidth: 0; } .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) { border-block-end: 0; } .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody):not(.pf-m-expanded) .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button::before { display: none; } .pf-v6-c-table tr.pf-m-clickable:last-child { border-block-end-color: transparent; } .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-clickable { cursor: pointer; outline-offset: var(--pf-v6-c-table__tr--m-clickable--OutlineOffset); background-color: var(--pf-v6-c-table__tr--m-clickable--BackgroundColor); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-clickable:is(:hover, :focus) { --pf-v6-c-table__tr--m-clickable--BackgroundColor: var(--pf-v6-c-table__tr--m-clickable--hover--BackgroundColor); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected { position: relative; outline-offset: var(--pf-v6-c-table__tr--m-selected--OutlineOffset); background-color: var(--pf-v6-c-table__tr--m-selected--BackgroundColor); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-first-cell-offset-reset > :first-child { padding-inline-start: var(--pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable { cursor: pointer; outline-offset: var(--pf-v6-c-table__tbody--m-clickable--OutlineOffset); background-color: var(--pf-v6-c-table__tbody--m-clickable--BackgroundColor); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:is(:hover, :focus) { --pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable.pf-m-expanded { --pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected { outline-offset: var(--pf-v6-c-table__tbody--m-selected--OutlineOffset); background-color: var(--pf-v6-c-table__tbody--m-selected--BackgroundColor); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected .pf-v6-c-table__tr.pf-m-expanded:not(.pf-v6-c-table__expandable-row) { border: none; } .pf-v6-c-table.pf-m-drag-over { overflow-anchor: none; } .pf-v6-c-table .pf-v6-c-table { background-color: transparent; } .pf-v6-c-table .pf-v6-c-table, .pf-v6-c-table .pf-v6-c-table :is(.pf-v6-c-table__tbody, .pf-v6-c-table__tr:last-child) { border-block-end: 0; } .pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator { --pf-v6-c-table__sort-indicator--MarginInlineStart: 0; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody.pf-m-expanded > .pf-v6-c-table__control-row { border-block-end: 0; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row { display: var(--pf-v6-c-table__expandable-row--Display, revert); visibility: hidden; opacity: var(--pf-v6-c-table__expandable-row--Opacity); translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY); transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade); transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction); transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide), 0s, 0s; transition-property: opacity, translate, visibility, background-color; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row[hidden] { display: var(--pf-v6-c-table__expandable-row--Display, revert); } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded { visibility: visible; opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity); translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY); transition-delay: 0s; transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), 0s, 0s; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content { max-height: 99999px; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th), .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content { padding: 0; overflow: hidden; transition-delay: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade); transition-property: padding, max-height, overflow; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content { max-height: 0; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) { border-block-end: 0; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__control-row.pf-m-no-animate-expand ~ .pf-v6-c-table__expandable-row { --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: 0s; --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s; --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: 0s; --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s; } [class*=pf-v6-c-table].pf-m-truncate { --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth); --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth); --pf-v6-c-table--cell--Overflow: hidden; --pf-v6-c-table--cell--TextOverflow: ellipsis; --pf-v6-c-table--cell--WhiteSpace: nowrap; } [class*=pf-v6-c-table].pf-m-wrap { --pf-v6-c-table--cell--MinWidth: 0; --pf-v6-c-table--cell--MaxWidth: none; --pf-v6-c-table--cell--Overflow: visible; --pf-v6-c-table--cell--TextOverflow: clip; --pf-v6-c-table--cell--WhiteSpace: normal; } [class*=pf-v6-c-table].pf-m-nowrap { --pf-v6-c-table--cell--MinWidth: 0; --pf-v6-c-table--cell--MaxWidth: none; --pf-v6-c-table--cell--Overflow: visible; --pf-v6-c-table--cell--TextOverflow: clip; --pf-v6-c-table--cell--WhiteSpace: nowrap; } [class*=pf-v6-c-table] .pf-v6-c-table__icon, [class*=pf-v6-c-table].pf-m-fit-content { --pf-v6-c-table--cell--MinWidth: fit-content; --pf-v6-c-table--cell--MaxWidth: none; --pf-v6-c-table--cell--Width: 1%; --pf-v6-c-table--cell--Overflow: visible; --pf-v6-c-table--cell--TextOverflow: clip; --pf-v6-c-table--cell--WhiteSpace: nowrap; } [class*=pf-v6-c-table].pf-m-break-word { --pf-v6-c-table--cell--WordBreak: break-word; --pf-v6-c-table--cell--WhiteSpace: normal; } .pf-v6-c-table__text { position: relative; display: block; width: var(--pf-v6-c-table--cell--Width); min-width: var(--pf-v6-c-table__text--MinWidth); max-width: var(--pf-v6-c-table--cell--MaxWidth); overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); line-height: var(--pf-v6-c-table--cell--LineHeight); word-break: var(--pf-v6-c-table--cell--WordBreak); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-v6-c-table__text.pf-m-truncate { --pf-v6-c-table--cell--MinWidth: 100%; min-width: max(var(--pf-v6-c-table__text--m-truncate--MinWidth), var(--pf-v6-c-table__text--MinWidth)); } .pf-v6-c-table__text.pf-m-truncate > :where(th, td) { overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-v6-c-table__button { position: relative; width: auto; padding-block-start: var(--pf-v6-c-table__button--PaddingBlockStart); padding-block-end: var(--pf-v6-c-table__button--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table__button--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-table__button--PaddingInlineEnd); margin-block-end: calc(var(--pf-v6-c-table__button--PaddingBlockEnd) * -1); margin-inline-start: calc(var(--pf-v6-c-table__button--PaddingInlineStart) * -1); font-size: inherit; font-weight: inherit; color: var(--pf-v6-c-table__button--Color); text-align: start; white-space: inherit; user-select: text; outline-offset: var(--pf-v6-c-table__button--OutlineOffset); background-color: var(--pf-v6-c-table__button--BackgroundColor); border: 0; border-radius: var(--pf-v6-c-table__button--BorderRadius); } .pf-v6-c-table__button::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: var(--pf-v6-c-table__button--BorderWidth) solid var(--pf-v6-c-table__button--BorderColor); border-radius: inherit; } .pf-v6-c-table .pf-v6-c-table .pf-v6-c-table__button { margin-block-end: 0; } .pf-v6-c-table__button:is(:hover, :focus) { color: var(--pf-v6-c-table__button--hover--Color); } .pf-v6-c-table__sort .pf-v6-c-table__text, .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__text { display: block; width: auto; overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-v6-c-table__button-content, .pf-v6-c-table__column-help { display: inline-grid; grid-template-columns: auto max-content; align-items: last baseline; justify-content: start; } .pf-v6-c-table__button-content .pf-v6-c-table__text, .pf-v6-c-table__column-help .pf-v6-c-table__text { min-width: auto; max-width: 100%; } .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__column-help, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-nowrap .pf-v6-c-table__column-help, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-nowrap .pf-v6-c-table__column-help { grid-template-columns: min-content max-content; } .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-fit-content .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-fit-content .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-fit-content .pf-v6-c-table__button-content, .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-fit-content .pf-v6-c-table__column-help, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-fit-content .pf-v6-c-table__column-help, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-fit-content .pf-v6-c-table__column-help { grid-template-columns: fit-content max-content; } .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-wrap .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-wrap .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-wrap .pf-v6-c-table__button-content, .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-truncate .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-truncate .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-truncate .pf-v6-c-table__button-content, .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-wrap .pf-v6-c-table__column-help, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-wrap .pf-v6-c-table__column-help, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-wrap .pf-v6-c-table__column-help, .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-truncate .pf-v6-c-table__column-help, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-truncate .pf-v6-c-table__column-help, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-truncate .pf-v6-c-table__column-help { grid-template-columns: auto max-content; } .pf-v6-c-table .pf-v6-c-table__check, .pf-v6-c-table .pf-v6-c-table__toggle, .pf-v6-c-table .pf-v6-c-table__action, .pf-v6-c-table .pf-v6-c-table__inline-edit-action, .pf-v6-c-table .pf-v6-c-table__draggable { --pf-v6-c-table--cell--MinWidth: 0; --pf-v6-c-table--cell--Width: 1%; max-width: none; } .pf-v6-c-table .pf-v6-c-table__favorite { --pf-v6-c-table--cell--MaxWidth: auto; } .pf-v6-c-table__toggle { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__toggle--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__toggle--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd); } .pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button { margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1); margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1); line-height: 1lh; } .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon { transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate)); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon { scale: -1 1; } .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon { transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate)); transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction); transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration); transition-property: transform; } .pf-v6-c-table__toggle svg { pointer-events: none; } .pf-v6-c-table__check { --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__check--PaddingInlineStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__check--PaddingInlineEnd); vertical-align: top; } .pf-v6-c-table__check .pf-v6-c-check { --pf-v6-c-check__label--FontSize: var(--pf-v6-c-table--cell--FontSize); --pf-v6-c-check__label--LineHeight: var(--pf-v6-c-table--cell--LineHeight); } .pf-v6-c-table__check .pf-v6-c-radio { --pf-v6-c-radio__label--FontSize: var(--pf-v6-c-table--cell--FontSize); --pf-v6-c-radio__label--LineHeight: var(--pf-v6-c-table--cell--LineHeight); } thead .pf-v6-c-table__check { vertical-align: bottom; } thead .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone, thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone { display: table-cell; height: auto; line-height: 1; vertical-align: baseline; } .pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) { --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize); } .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) { --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color); } .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) { --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color); } .pf-v6-c-table__draggable .pf-v6-c-button { cursor: grab; } .pf-v6-c-table__draggable .pf-v6-c-button:active { cursor: grabbing; } .pf-v6-c-table__action, .pf-v6-c-table__favorite, .pf-v6-c-table__inline-edit-action, .pf-v6-c-table__draggable { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__action--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__action--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__action--PaddingInlineStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__action--PaddingInlineEnd); } .pf-v6-c-table__action:last-child, .pf-v6-c-table__inline-edit-action:last-child { text-align: end; } .pf-v6-c-table__compound-expansion-toggle { --pf-v6-c-table__button--Color: var(--pf-v6-c-table__compound-expansion-toggle__button--Color); --pf-v6-c-table__button--hover--Color: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--Color); position: relative; padding: 0; background-color: var(--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor); } .pf-v6-c-table__compound-expansion-toggle.pf-m-truncate { overflow: visible; } .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button { position: static; min-width: 100%; padding: 0; margin: 0; overflow: hidden; } .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button:is(:hover, :focus) { outline: 0; } .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button::after { position: absolute; inset: 0; content: ""; border: 0; border-block-start: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth) solid var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor); border-radius: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius); } .pf-v6-c-table__compound-expansion-toggle:hover, .pf-v6-c-table__compound-expansion-toggle:focus-within { --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor); --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth); } .pf-v6-c-table__compound-expansion-toggle.pf-m-expanded { --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor); --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: var(--pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth); } .pf-v6-c-table__compound-expansion-toggle:focus-within { outline-offset: var(--pf-v6-c-table__button--OutlineOffset); } @media (-webkit-min-device-pixel-ratio: 0) { .pf-v6-c-table__compound-expansion-toggle:focus-within { outline-style: auto; outline-color: -webkit-focus-ring-color; } } .pf-v6-c-table__column-help-action { align-self: last baseline; margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart); } .pf-v6-c-table__column-help-action .pf-v6-c-button { line-height: 1lh; } .pf-v6-c-table__sort { vertical-align: bottom; } .pf-v6-c-table__sort .pf-v6-c-table__button:is(:hover, :focus) { --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort__button--hover__sort-indicator--Color); --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__sort__button--hover__text--Color); --pf-v6-c-table__button--BackgroundColor: var(--pf-v6-c-table__button--hover--BackgroundColor); --pf-v6-c-table__button--BorderWidth: var(--pf-v6-c-table__button--hover--BorderWidth); } .pf-v6-c-table__sort .pf-v6-c-table__button .pf-v6-c-table__text { color: var(--pf-v6-c-table__sort__button__text--Color); } .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button, .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-button { --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort--m-selected__sort-indicator--Color); } .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button .pf-v6-c-table__text, .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-button .pf-v6-c-table__text { color: var(--pf-v6-c-table__sort--m-selected__button--Color); } .pf-v6-c-table__sort.pf-m-help { --pf-v6-c-table__th--m-help--MinWidth: var(--pf-v6-c-table__sort--m-help--MinWidth); } .pf-v6-c-table__sort.pf-m-favorite .pf-v6-c-table__text { font-size: var(--pf-v6-c-table__favorite--c-button--FontSize); } .pf-v6-c-table__sort-indicator { grid-column: 2; align-self: end; margin-inline-start: var(--pf-v6-c-table__sort-indicator--MarginInlineStart); color: var(--pf-v6-c-table__sort-indicator--Color); pointer-events: none; } .pf-v6-c-table__expandable-row { position: relative; border-block-end: 0 solid transparent; } :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th, :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td { padding-block-start: 0; } .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):not(.pf-m-no-padding) { padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart); } .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding, .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding { padding-block-start: 0; padding-block-end: 0; padding-inline-start: 0; padding-inline-end: 0; } .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content, .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content { padding: 0; border-radius: 0; } .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content { position: relative; padding-block-start: var(--pf-v6-c-table__expandable-row-content--PaddingBlockStart); padding-block-end: var(--pf-v6-c-table__expandable-row-content--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table__expandable-row-content--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-table__expandable-row-content--PaddingInlineEnd); background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor); border: 0; border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius); } .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content.pf-m-no-background { background-color: transparent; } .pf-v6-c-table__expandable-row .pf-v6-c-table__td:not(.pf-m-no-padding) > .pf-v6-c-table__expandable-row-content::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: var(--pf-v6-c-table__expandable-row-content--BorderWidth) solid var(--pf-v6-c-table__expandable-row-content--BorderColor); border-radius: inherit; } .pf-v6-c-table__expandable-row.pf-m-expanded { border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor); border-block-end-width: var(--pf-v6-c-table--border-width--base); } .pf-v6-c-table__expandable-row:not(.pf-m-expanded) { display: none; } .pf-v6-c-table__expandable-row tr:last-child { border-block-end: 0; } .pf-v6-c-table.pf-m-compact { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd); } .pf-v6-c-table.pf-m-compact tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd); } .pf-v6-c-table.pf-m-compact thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th), .pf-v6-c-table.pf-m-compact thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__toggle { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__th--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__th--PaddingBlockEnd); } .pf-v6-c-table.pf-m-compact .pf-v6-c-table__action, .pf-v6-c-table.pf-m-compact .pf-v6-c-table__favorite, .pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle, .pf-v6-c-table.pf-m-compact .pf-v6-c-table__draggable { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__action--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__action--PaddingBlockEnd); } .pf-v6-c-table.pf-m-compact .pf-v6-c-table__td.pf-m-action { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd); } .pf-v6-c-table.pf-m-compact .pf-v6-c-table__icon { width: auto; min-width: 0; text-align: center; } .pf-v6-c-table__thead { --pf-v6-c-table__tr--BorderBlockEndWidth: 0; --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart); --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd); vertical-align: bottom; } .pf-v6-c-table__thead.pf-m-nested-column-header { --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0; position: relative; } .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__tr:last-child:not(.pf-m-border-row) { z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex); pointer-events: none; border-block-end: var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor); } .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button { --pf-v6-c-table__button--PaddingInlineStart: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineStart); --pf-v6-c-table__button--PaddingInlineEnd: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineEnd); margin-inline-end: calc(var(--pf-v6-c-table__button--PaddingInlineStart) * -1); } .pf-v6-c-table__tbody { vertical-align: top; } .pf-v6-c-table__tbody .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded { --pf-v6-c-table__expandable-row-content--BorderWidth: var(--pf-v6-c-table--compound-expansion--m-expanded--BorderWidth); background-color: var(--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor); } .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tr.pf-m-expanded { border-block-end: 0; } .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody { border-block-end: var(--pf-v6-c-table__tr--BorderBlockEndWidth) solid var(--pf-v6-c-table__tr--BorderBlockEndColor); } .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded { border-block-end: var(--pf-v6-c-table__tr--BorderBlockEndWidth) solid var(--pf-v6-c-table__tr--BorderBlockEndColor); } .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row { background-color: var(--pf-v6-c-table__control-row--BackgroundColor); border-block-end: var(--pf-v6-c-table__control-row--BorderBlockEndWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBlockEndColor); } .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row.pf-m-expanded { border-block-end: 0; } .pf-v6-c-table__tr { border-block-end: var(--pf-v6-c-table__tr--BorderBlockEndWidth) solid var(--pf-v6-c-table__tr--BorderBlockEndColor); } .pf-v6-c-table__thead .pf-v6-c-table__tr { border-block-end: 0; } .pf-v6-c-table__tr.pf-m-border-row { height: var(--pf-v6-c-table--border-width--base); background-color: var(--pf-v6-c-table--BorderColor); } .pf-v6-c-table__tfoot { --pf-v6-c-table__tr--BorderBlockEndWidth: 0; vertical-align: top; } .pf-v6-c-table__icon-inline { display: flex; align-items: center; } .pf-v6-c-table__icon-inline > :not(:last-child) { margin-inline-end: var(--pf-v6-c-table__icon-inline--MarginInlineEnd); } .pf-v6-c-table .pf-m-width-10 { --pf-v6-c-table--cell--Width: 10%; } .pf-v6-c-table .pf-m-width-15 { --pf-v6-c-table--cell--Width: 15%; } .pf-v6-c-table .pf-m-width-20 { --pf-v6-c-table--cell--Width: 20%; } .pf-v6-c-table .pf-m-width-25 { --pf-v6-c-table--cell--Width: 25%; } .pf-v6-c-table .pf-m-width-30 { --pf-v6-c-table--cell--Width: 30%; } .pf-v6-c-table .pf-m-width-35 { --pf-v6-c-table--cell--Width: 35%; } .pf-v6-c-table .pf-m-width-40 { --pf-v6-c-table--cell--Width: 40%; } .pf-v6-c-table .pf-m-width-45 { --pf-v6-c-table--cell--Width: 45%; } .pf-v6-c-table .pf-m-width-50 { --pf-v6-c-table--cell--Width: 50%; } .pf-v6-c-table .pf-m-width-60 { --pf-v6-c-table--cell--Width: 60%; } .pf-v6-c-table .pf-m-width-70 { --pf-v6-c-table--cell--Width: 70%; } .pf-v6-c-table .pf-m-width-80 { --pf-v6-c-table--cell--Width: 80%; } .pf-v6-c-table .pf-m-width-90 { --pf-v6-c-table--cell--Width: 90%; } .pf-v6-c-table .pf-m-width-100 { --pf-v6-c-table--cell--Width: 100%; } .pf-v6-c-inline-edit { --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default); --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover); --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--plain); --pf-v6-c-inline-edit__group--m-footer--MarginBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-inline-edit__label--m-bold--FontWeight: var(--pf-t--global--font--weight--body--bold); } .pf-v6-c-inline-edit__group { display: flex; align-items: baseline; } .pf-v6-c-inline-edit__group > * { margin-inline-end: var(--pf-v6-c-inline-edit__group--item--MarginInlineEnd); } .pf-v6-c-inline-edit__group.pf-m-icon-group { --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd); } .pf-v6-c-inline-edit__group.pf-m-footer { margin-block-start: var(--pf-v6-c-inline-edit__group--m-footer--MarginBlockStart); } .pf-v6-c-inline-edit__group.pf-m-column { --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0; flex-direction: column; } .pf-v6-c-inline-edit__group > :last-child { --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0; } .pf-v6-c-inline-edit__input { flex: 1; } .pf-v6-c-inline-edit__action.pf-m-valid .pf-v6-c-button.pf-m-plain { --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color); } .pf-v6-c-inline-edit__action.pf-m-valid .pf-v6-c-button.pf-m-plain:hover { --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color); } .pf-v6-c-inline-edit__input, .pf-v6-c-inline-edit__action, .pf-v6-c-inline-edit__group.pf-m-action-group { display: none; } .pf-v6-c-inline-edit__action.pf-m-enable-editable { display: inline-block; } .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__input, .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__input { display: block; } .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__action, .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__action { display: inline-block; } .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__group.pf-m-action-group, .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__group.pf-m-action-group { display: inline-flex; } .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__value, .pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__action.pf-m-enable-editable, .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__value, .pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__action.pf-m-enable-editable { display: none; } .pf-v6-c-inline-edit__label + .pf-v6-c-inline-edit__action.pf-m-enable > .pf-v6-c-button { margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1); margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1); } .pf-v6-c-inline-edit__label.pf-m-bold { font-weight: var(--pf-v6-c-inline-edit__label--m-bold--FontWeight); } .pf-v6-c-inline-edit__editable-text br { display: none; } .pf-v6-c-table { --pf-v6-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong); --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0; --pf-v6-c-table__tbody--after--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table__tr--responsive--last-child--BorderBlockEndWidth: var(--pf-v6-c-table__tbody--responsive--border-width--base); --pf-v6-c-table__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md); --pf-v6-c-table__tr--responsive--MarginBlockStart: var(--pf-v6-c-table__tbody--responsive--border-width--base); --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: 0; --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: transparent; --pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__expandable-row--after--border-width--base); --pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__expandable-row--after--border-width--base); --pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-table--m-grid--cell--hidden-visible--Display: grid; --pf-v6-c-table--m-grid--cell--PaddingBlockStart: 0; --pf-v6-c-table--m-grid--cell--PaddingInlineEnd: 0; --pf-v6-c-table--m-grid--cell--PaddingBlockEnd: 0; --pf-v6-c-table--m-grid--cell--PaddingInlineStart: 0; --pf-v6-c-table-td--responsive--GridColumnGap: var(--pf-t--global--spacer--md); --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table--cell--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0; --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0; --pf-v6-c-table--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-compact__check--responsive--MarginBlockStart: 0.4375rem; --pf-v6-c-table--m-compact__action--responsive--MarginBlockStart: calc(var(--pf-t--global--spacer--xs) * -1); --pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1); --pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1); --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-table__check--responsive--MarginInlineStart: var(--pf-v6-c-table__tbody--responsive--border-width--base); --pf-v6-c-table__check--responsive--MarginBlockStart: 0.875rem; --pf-v6-c-table--m-grid__favorite--MarginBlockStart: 0.5rem; --pf-v6-c-table--m-grid__check--favorite--MarginInlineStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-grid__favorite--action--MarginInlineStart: var(--pf-t--global--spacer--2xl); --pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart: calc(var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart) + var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart)); --pf-v6-c-table__toggle__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-table__toggle__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-table__toggle__icon--Transition: transform var(--pf-v6-c-table__toggle__icon--TransitionDuration) var(--pf-v6-c-table__toggle__icon--TransitionTimingFunction); --pf-v6-c-table__toggle--m-expanded__icon--Rotate: 180deg; } .pf-m-grid.pf-v6-c-table { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart); --pf-v6-c-table--cell--first-last-child--PaddingInline: 0; --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto; --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto; --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto; --pf-v6-c-table__favorite--c-button--MarginInlineStart: auto; display: grid; border: none; } .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) { width: auto; min-width: 0; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__text { position: relative; width: auto; min-width: 0; max-width: none; overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-m-grid.pf-v6-c-table thead:where(.pf-v6-c-table__thead) { display: none; } .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) { display: block; } .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type { border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor); } .pf-m-grid.pf-v6-c-table.pf-m-animate-expand { --pf-v6-c-table__expandable-row--Display: block; } .pf-m-grid.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before { content: none; } .pf-m-grid.pf-v6-c-table.pf-m-expandable { --pf-v6-c-table__tr--BorderBlockEndWidth: 0; } .pf-m-grid.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody, .pf-m-grid.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded { border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor); } .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected { --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0; --pf-v6-c-table__expandable-row--after--BorderColor: transparent; } .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) { display: grid; grid-template-columns: 1fr; height: auto; grid-auto-columns: max-content; grid-column-gap: var(--pf-v6-c-table__tr--responsive--GridColumnGap); padding-block-start: var(--pf-v6-c-table__tr--responsive--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-table__tr--responsive--PaddingInlineEnd); padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingInlineStart); } .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) { padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingInlineEnd); padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart); } .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child { --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart); } .pf-m-grid.pf-v6-c-table.pf-m-compact { --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart); --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd); --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart); --pf-v6-c-table--cell--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd); --pf-v6-c-table__check--responsive--MarginBlockStart: var(--pf-v6-c-table--m-compact__check--responsive--MarginBlockStart); --pf-v6-c-table__check--input--MarginBlockStart: 0; } .pf-m-grid.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action { margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart); margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart); } .pf-m-grid.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button { margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd); } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__icon > * { text-align: start; } .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] { --pf-v6-c-table--cell--hidden-visible--Display: var(--pf-v6-c-table--m-grid--cell--hidden-visible--Display); grid-column: 1; grid-column-gap: var(--pf-v6-c-table-td--responsive--GridColumnGap); grid-template-columns: 1fr minmax(0, 1.5fr); align-items: start; } .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action { align-items: center; } .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * { grid-column: 2; } .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before { position: revert; font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight); text-align: start; content: attr(data-label); } .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child { --pf-v6-c-table--cell--PaddingInlineStart: 0; } .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child { --pf-v6-c-table--cell--PaddingInlineEnd: 0; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table { --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart); --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd); --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd); --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart); border: 0; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle { --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0; --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0; --pf-v6-c-table__compound-expansion-toggle__button--after--InsetBlockStart: 100%; } .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) { position: relative; } .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody)::after { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; content: ""; border: 0; border-inline-start: var(--pf-v6-c-table__tbody--after--BorderInlineStartWidth) solid var(--pf-v6-c-table__tbody--after--BorderColor); } .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--after--border-width--base); } .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tbody:where(.pf-v6-c-table__tbody) { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0; } .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :first-child:not(.pf-v6-c-table__check)::after { --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0; position: static; width: auto; background-color: transparent; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row { --pf-v6-c-table--cell--responsive--PaddingBlockStart: 0; --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0; --pf-v6-c-table--cell--responsive--PaddingBlockEnd: 0; --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0; --pf-v6-c-table--cell--PaddingInlineEnd: 0; --pf-v6-c-table--cell--PaddingInlineStart: 0; display: block; max-height: var(--pf-v6-c-table__expandable-row--MaxHeight); overflow-y: auto; border-block-end: none; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) { position: static; display: block; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row.pf-m-expanded { border-block-start-color: var(--pf-v6-c-table--BorderColor); } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row > :first-child:not(.pf-v6-c-table__check)::after { content: none; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content, .pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content { padding: 0; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row:not(.pf-m-expanded) { display: none; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content { padding-inline-end: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd); padding-inline-start: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart); } .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0; --pf-v6-c-table__tbody--after--BorderInlineStartColor: transparent; } .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable, .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr) { position: relative; } .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr)::after { content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; width: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth); background-color: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartColor); } .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-expanded { --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartWidth); --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartColor); } .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-selected { --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartWidth); --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartColor); } .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected::after { content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; width: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartWidth); background-color: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartColor); } .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__toggle, .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__check, .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__favorite, .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__action { width: auto; padding: 0; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__toggle { grid-row-start: 20; grid-column: -1; justify-self: end; padding-inline-end: 0; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__toggle::after { content: none; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__button { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart); } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__check, .pf-m-grid.pf-v6-c-table .pf-v6-c-table__favorite, .pf-m-grid.pf-v6-c-table .pf-v6-c-table__action { grid-row-start: 1; grid-column-start: 2; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__check { margin-block-start: var(--pf-v6-c-table__check--responsive--MarginBlockStart); margin-inline-start: var(--pf-v6-c-table__check--responsive--MarginInlineStart); line-height: 1; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite { margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart); } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart); } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table__action--responsive--MarginInlineStart); } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__check label { display: inline-block; margin: 0; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__favorite { margin-block-start: var(--pf-v6-c-table--m-grid__favorite--MarginBlockStart); } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__favorite ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart); } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__action { text-align: end; } @media screen and (max-width: 36rem) { .pf-m-grid.pf-v6-c-table .pf-v6-c-table__action { grid-row-start: 1; grid-column-start: 2; margin-inline-start: 0; } } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__inline-edit-action { grid-column: 2; grid-row: 2; } .pf-m-grid.pf-v6-c-table .pf-v6-c-table__toggle-icon { transition: var(--pf-v6-c-table__toggle__icon--Transition); } .pf-v6-c-button.pf-m-expanded > .pf-m-grid.pf-v6-c-table .pf-v6-c-table__toggle-icon { transform: rotate(var(--pf-v6-c-table__toggle--m-expanded__icon--Rotate)); } .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-nowrap { --pf-v6-c-table--cell--Overflow: auto; } .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-fit-content { width: auto; white-space: normal; } .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-truncate { --pf-v6-c-table--cell--MaxWidth: 100%; } .pf-m-grid.pf-v6-c-table [class*=pf-m-width] { --pf-v6-c-table--cell--Width: auto; } @container pf-v6-contain-table (max-width: calc(48rem - 1px)) { .pf-m-grid-md.pf-v6-c-table { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart); --pf-v6-c-table--cell--first-last-child--PaddingInline: 0; --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto; --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto; --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto; --pf-v6-c-table__favorite--c-button--MarginInlineStart: auto; display: grid; border: none; } .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) { width: auto; min-width: 0; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__text { position: relative; width: auto; min-width: 0; max-width: none; overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-m-grid-md.pf-v6-c-table thead:where(.pf-v6-c-table__thead) { display: none; } .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) { display: block; } .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type { border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor); } .pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand { --pf-v6-c-table__expandable-row--Display: block; } .pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before { content: none; } .pf-m-grid-md.pf-v6-c-table.pf-m-expandable { --pf-v6-c-table__tr--BorderBlockEndWidth: 0; } .pf-m-grid-md.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody, .pf-m-grid-md.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded { border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor); } .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected { --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0; --pf-v6-c-table__expandable-row--after--BorderColor: transparent; } .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) { display: grid; grid-template-columns: 1fr; height: auto; grid-auto-columns: max-content; grid-column-gap: var(--pf-v6-c-table__tr--responsive--GridColumnGap); padding-block-start: var(--pf-v6-c-table__tr--responsive--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-table__tr--responsive--PaddingInlineEnd); padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingInlineStart); } .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) { padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingInlineEnd); padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart); } .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child { --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart); } .pf-m-grid-md.pf-v6-c-table.pf-m-compact { --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart); --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd); --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart); --pf-v6-c-table--cell--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd); --pf-v6-c-table__check--responsive--MarginBlockStart: var(--pf-v6-c-table--m-compact__check--responsive--MarginBlockStart); --pf-v6-c-table__check--input--MarginBlockStart: 0; } .pf-m-grid-md.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action { margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart); margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart); } .pf-m-grid-md.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button { margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd); } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__icon > * { text-align: start; } .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] { --pf-v6-c-table--cell--hidden-visible--Display: var(--pf-v6-c-table--m-grid--cell--hidden-visible--Display); grid-column: 1; grid-column-gap: var(--pf-v6-c-table-td--responsive--GridColumnGap); grid-template-columns: 1fr minmax(0, 1.5fr); align-items: start; } .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action { align-items: center; } .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * { grid-column: 2; } .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before { position: revert; font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight); text-align: start; content: attr(data-label); } .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child { --pf-v6-c-table--cell--PaddingInlineStart: 0; } .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child { --pf-v6-c-table--cell--PaddingInlineEnd: 0; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table { --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart); --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd); --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd); --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart); border: 0; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle { --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0; --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0; --pf-v6-c-table__compound-expansion-toggle__button--after--InsetBlockStart: 100%; } .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) { position: relative; } .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody)::after { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; content: ""; border: 0; border-inline-start: var(--pf-v6-c-table__tbody--after--BorderInlineStartWidth) solid var(--pf-v6-c-table__tbody--after--BorderColor); } .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--after--border-width--base); } .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tbody:where(.pf-v6-c-table__tbody) { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0; } .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :first-child:not(.pf-v6-c-table__check)::after { --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0; position: static; width: auto; background-color: transparent; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row { --pf-v6-c-table--cell--responsive--PaddingBlockStart: 0; --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0; --pf-v6-c-table--cell--responsive--PaddingBlockEnd: 0; --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0; --pf-v6-c-table--cell--PaddingInlineEnd: 0; --pf-v6-c-table--cell--PaddingInlineStart: 0; display: block; max-height: var(--pf-v6-c-table__expandable-row--MaxHeight); overflow-y: auto; border-block-end: none; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) { position: static; display: block; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row.pf-m-expanded { border-block-start-color: var(--pf-v6-c-table--BorderColor); } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row > :first-child:not(.pf-v6-c-table__check)::after { content: none; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content, .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content { padding: 0; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row:not(.pf-m-expanded) { display: none; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content { padding-inline-end: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd); padding-inline-start: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart); } .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0; --pf-v6-c-table__tbody--after--BorderInlineStartColor: transparent; } .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable, .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr) { position: relative; } .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr)::after { content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; width: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth); background-color: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartColor); } .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-expanded { --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartWidth); --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartColor); } .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-selected { --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartWidth); --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartColor); } .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected::after { content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; width: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartWidth); background-color: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartColor); } .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__toggle, .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__check, .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__favorite, .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__action { width: auto; padding: 0; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__toggle { grid-row-start: 20; grid-column: -1; justify-self: end; padding-inline-end: 0; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__toggle::after { content: none; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__button { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart); } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__check, .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__favorite, .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action { grid-row-start: 1; grid-column-start: 2; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__check { margin-block-start: var(--pf-v6-c-table__check--responsive--MarginBlockStart); margin-inline-start: var(--pf-v6-c-table__check--responsive--MarginInlineStart); line-height: 1; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite { margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart); } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart); } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table__action--responsive--MarginInlineStart); } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__check label { display: inline-block; margin: 0; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__favorite { margin-block-start: var(--pf-v6-c-table--m-grid__favorite--MarginBlockStart); } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__favorite ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart); } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action { text-align: end; } @media screen and (max-width: 36rem) { .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action { grid-row-start: 1; grid-column-start: 2; margin-inline-start: 0; } } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action { grid-column: 2; grid-row: 2; } .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__toggle-icon { transition: var(--pf-v6-c-table__toggle__icon--Transition); } .pf-v6-c-button.pf-m-expanded > .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__toggle-icon { transform: rotate(var(--pf-v6-c-table__toggle--m-expanded__icon--Rotate)); } .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-nowrap { --pf-v6-c-table--cell--Overflow: auto; } .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-fit-content { width: auto; white-space: normal; } .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-truncate { --pf-v6-c-table--cell--MaxWidth: 100%; } .pf-m-grid-md.pf-v6-c-table [class*=pf-m-width] { --pf-v6-c-table--cell--Width: auto; } } @container pf-v6-contain-table (max-width: calc(62rem - 1px)) { .pf-m-grid-lg.pf-v6-c-table { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart); --pf-v6-c-table--cell--first-last-child--PaddingInline: 0; --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto; --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto; --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto; --pf-v6-c-table__favorite--c-button--MarginInlineStart: auto; display: grid; border: none; } .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) { width: auto; min-width: 0; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__text { position: relative; width: auto; min-width: 0; max-width: none; overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-m-grid-lg.pf-v6-c-table thead:where(.pf-v6-c-table__thead) { display: none; } .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) { display: block; } .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type { border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor); } .pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand { --pf-v6-c-table__expandable-row--Display: block; } .pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before { content: none; } .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable { --pf-v6-c-table__tr--BorderBlockEndWidth: 0; } .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody, .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded { border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor); } .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected { --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0; --pf-v6-c-table__expandable-row--after--BorderColor: transparent; } .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) { display: grid; grid-template-columns: 1fr; height: auto; grid-auto-columns: max-content; grid-column-gap: var(--pf-v6-c-table__tr--responsive--GridColumnGap); padding-block-start: var(--pf-v6-c-table__tr--responsive--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-table__tr--responsive--PaddingInlineEnd); padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingInlineStart); } .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) { padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingInlineEnd); padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart); } .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child { --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart); } .pf-m-grid-lg.pf-v6-c-table.pf-m-compact { --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart); --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd); --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart); --pf-v6-c-table--cell--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd); --pf-v6-c-table__check--responsive--MarginBlockStart: var(--pf-v6-c-table--m-compact__check--responsive--MarginBlockStart); --pf-v6-c-table__check--input--MarginBlockStart: 0; } .pf-m-grid-lg.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action { margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart); margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart); } .pf-m-grid-lg.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button { margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd); } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__icon > * { text-align: start; } .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] { --pf-v6-c-table--cell--hidden-visible--Display: var(--pf-v6-c-table--m-grid--cell--hidden-visible--Display); grid-column: 1; grid-column-gap: var(--pf-v6-c-table-td--responsive--GridColumnGap); grid-template-columns: 1fr minmax(0, 1.5fr); align-items: start; } .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action { align-items: center; } .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * { grid-column: 2; } .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before { position: revert; font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight); text-align: start; content: attr(data-label); } .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child { --pf-v6-c-table--cell--PaddingInlineStart: 0; } .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child { --pf-v6-c-table--cell--PaddingInlineEnd: 0; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table { --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart); --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd); --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd); --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart); border: 0; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle { --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0; --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0; --pf-v6-c-table__compound-expansion-toggle__button--after--InsetBlockStart: 100%; } .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) { position: relative; } .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody)::after { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; content: ""; border: 0; border-inline-start: var(--pf-v6-c-table__tbody--after--BorderInlineStartWidth) solid var(--pf-v6-c-table__tbody--after--BorderColor); } .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--after--border-width--base); } .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tbody:where(.pf-v6-c-table__tbody) { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0; } .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :first-child:not(.pf-v6-c-table__check)::after { --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0; position: static; width: auto; background-color: transparent; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row { --pf-v6-c-table--cell--responsive--PaddingBlockStart: 0; --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0; --pf-v6-c-table--cell--responsive--PaddingBlockEnd: 0; --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0; --pf-v6-c-table--cell--PaddingInlineEnd: 0; --pf-v6-c-table--cell--PaddingInlineStart: 0; display: block; max-height: var(--pf-v6-c-table__expandable-row--MaxHeight); overflow-y: auto; border-block-end: none; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) { position: static; display: block; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row.pf-m-expanded { border-block-start-color: var(--pf-v6-c-table--BorderColor); } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row > :first-child:not(.pf-v6-c-table__check)::after { content: none; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content, .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content { padding: 0; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row:not(.pf-m-expanded) { display: none; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content { padding-inline-end: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd); padding-inline-start: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart); } .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0; --pf-v6-c-table__tbody--after--BorderInlineStartColor: transparent; } .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable, .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr) { position: relative; } .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr)::after { content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; width: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth); background-color: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartColor); } .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-expanded { --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartWidth); --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartColor); } .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-selected { --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartWidth); --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartColor); } .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected::after { content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; width: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartWidth); background-color: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartColor); } .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__toggle, .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__check, .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__favorite, .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__action { width: auto; padding: 0; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__toggle { grid-row-start: 20; grid-column: -1; justify-self: end; padding-inline-end: 0; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__toggle::after { content: none; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__button { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart); } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__check, .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__favorite, .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action { grid-row-start: 1; grid-column-start: 2; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__check { margin-block-start: var(--pf-v6-c-table__check--responsive--MarginBlockStart); margin-inline-start: var(--pf-v6-c-table__check--responsive--MarginInlineStart); line-height: 1; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite { margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart); } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart); } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table__action--responsive--MarginInlineStart); } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__check label { display: inline-block; margin: 0; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__favorite { margin-block-start: var(--pf-v6-c-table--m-grid__favorite--MarginBlockStart); } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__favorite ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart); } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action { text-align: end; } @media screen and (max-width: 36rem) { .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action { grid-row-start: 1; grid-column-start: 2; margin-inline-start: 0; } } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action { grid-column: 2; grid-row: 2; } .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__toggle-icon { transition: var(--pf-v6-c-table__toggle__icon--Transition); } .pf-v6-c-button.pf-m-expanded > .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__toggle-icon { transform: rotate(var(--pf-v6-c-table__toggle--m-expanded__icon--Rotate)); } .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-nowrap { --pf-v6-c-table--cell--Overflow: auto; } .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-fit-content { width: auto; white-space: normal; } .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-truncate { --pf-v6-c-table--cell--MaxWidth: 100%; } .pf-m-grid-lg.pf-v6-c-table [class*=pf-m-width] { --pf-v6-c-table--cell--Width: auto; } } @container pf-v6-contain-table (max-width: calc(75rem - 1px)) { .pf-m-grid-xl.pf-v6-c-table { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart); --pf-v6-c-table--cell--first-last-child--PaddingInline: 0; --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto; --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto; --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto; --pf-v6-c-table__favorite--c-button--MarginInlineStart: auto; display: grid; border: none; } .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) { width: auto; min-width: 0; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__text { position: relative; width: auto; min-width: 0; max-width: none; overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-m-grid-xl.pf-v6-c-table thead:where(.pf-v6-c-table__thead) { display: none; } .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) { display: block; } .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type { border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor); } .pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand { --pf-v6-c-table__expandable-row--Display: block; } .pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before { content: none; } .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable { --pf-v6-c-table__tr--BorderBlockEndWidth: 0; } .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody, .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded { border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor); } .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected { --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0; --pf-v6-c-table__expandable-row--after--BorderColor: transparent; } .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) { display: grid; grid-template-columns: 1fr; height: auto; grid-auto-columns: max-content; grid-column-gap: var(--pf-v6-c-table__tr--responsive--GridColumnGap); padding-block-start: var(--pf-v6-c-table__tr--responsive--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-table__tr--responsive--PaddingInlineEnd); padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingInlineStart); } .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) { padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingInlineEnd); padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart); } .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child { --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart); } .pf-m-grid-xl.pf-v6-c-table.pf-m-compact { --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart); --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd); --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart); --pf-v6-c-table--cell--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd); --pf-v6-c-table__check--responsive--MarginBlockStart: var(--pf-v6-c-table--m-compact__check--responsive--MarginBlockStart); --pf-v6-c-table__check--input--MarginBlockStart: 0; } .pf-m-grid-xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action { margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart); margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart); } .pf-m-grid-xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button { margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd); } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__icon > * { text-align: start; } .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] { --pf-v6-c-table--cell--hidden-visible--Display: var(--pf-v6-c-table--m-grid--cell--hidden-visible--Display); grid-column: 1; grid-column-gap: var(--pf-v6-c-table-td--responsive--GridColumnGap); grid-template-columns: 1fr minmax(0, 1.5fr); align-items: start; } .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action { align-items: center; } .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * { grid-column: 2; } .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before { position: revert; font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight); text-align: start; content: attr(data-label); } .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child { --pf-v6-c-table--cell--PaddingInlineStart: 0; } .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child { --pf-v6-c-table--cell--PaddingInlineEnd: 0; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table { --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart); --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd); --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd); --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart); border: 0; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle { --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0; --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0; --pf-v6-c-table__compound-expansion-toggle__button--after--InsetBlockStart: 100%; } .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) { position: relative; } .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody)::after { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; content: ""; border: 0; border-inline-start: var(--pf-v6-c-table__tbody--after--BorderInlineStartWidth) solid var(--pf-v6-c-table__tbody--after--BorderColor); } .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--after--border-width--base); } .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tbody:where(.pf-v6-c-table__tbody) { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0; } .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :first-child:not(.pf-v6-c-table__check)::after { --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0; position: static; width: auto; background-color: transparent; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row { --pf-v6-c-table--cell--responsive--PaddingBlockStart: 0; --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0; --pf-v6-c-table--cell--responsive--PaddingBlockEnd: 0; --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0; --pf-v6-c-table--cell--PaddingInlineEnd: 0; --pf-v6-c-table--cell--PaddingInlineStart: 0; display: block; max-height: var(--pf-v6-c-table__expandable-row--MaxHeight); overflow-y: auto; border-block-end: none; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) { position: static; display: block; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row.pf-m-expanded { border-block-start-color: var(--pf-v6-c-table--BorderColor); } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row > :first-child:not(.pf-v6-c-table__check)::after { content: none; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content, .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content { padding: 0; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row:not(.pf-m-expanded) { display: none; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content { padding-inline-end: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd); padding-inline-start: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart); } .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0; --pf-v6-c-table__tbody--after--BorderInlineStartColor: transparent; } .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable, .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr) { position: relative; } .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr)::after { content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; width: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth); background-color: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartColor); } .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-expanded { --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartWidth); --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartColor); } .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-selected { --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartWidth); --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartColor); } .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected::after { content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; width: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartWidth); background-color: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartColor); } .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__toggle, .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__check, .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__favorite, .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__action { width: auto; padding: 0; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__toggle { grid-row-start: 20; grid-column: -1; justify-self: end; padding-inline-end: 0; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__toggle::after { content: none; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__button { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart); } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__check, .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__favorite, .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action { grid-row-start: 1; grid-column-start: 2; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__check { margin-block-start: var(--pf-v6-c-table__check--responsive--MarginBlockStart); margin-inline-start: var(--pf-v6-c-table__check--responsive--MarginInlineStart); line-height: 1; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite { margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart); } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart); } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table__action--responsive--MarginInlineStart); } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__check label { display: inline-block; margin: 0; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__favorite { margin-block-start: var(--pf-v6-c-table--m-grid__favorite--MarginBlockStart); } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__favorite ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart); } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action { text-align: end; } @media screen and (max-width: 36rem) { .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action { grid-row-start: 1; grid-column-start: 2; margin-inline-start: 0; } } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action { grid-column: 2; grid-row: 2; } .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__toggle-icon { transition: var(--pf-v6-c-table__toggle__icon--Transition); } .pf-v6-c-button.pf-m-expanded > .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__toggle-icon { transform: rotate(var(--pf-v6-c-table__toggle--m-expanded__icon--Rotate)); } .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-nowrap { --pf-v6-c-table--cell--Overflow: auto; } .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-fit-content { width: auto; white-space: normal; } .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-truncate { --pf-v6-c-table--cell--MaxWidth: 100%; } .pf-m-grid-xl.pf-v6-c-table [class*=pf-m-width] { --pf-v6-c-table--cell--Width: auto; } } @container pf-v6-contain-table (max-width: calc(90.625rem - 1px)) { .pf-m-grid-2xl.pf-v6-c-table { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart); --pf-v6-c-table--cell--first-last-child--PaddingInline: 0; --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto; --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto; --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto; --pf-v6-c-table__favorite--c-button--MarginInlineStart: auto; display: grid; border: none; } .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) { width: auto; min-width: 0; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__text { position: relative; width: auto; min-width: 0; max-width: none; overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-m-grid-2xl.pf-v6-c-table thead:where(.pf-v6-c-table__thead) { display: none; } .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) { display: block; } .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type { border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor); } .pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand { --pf-v6-c-table__expandable-row--Display: block; } .pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before { content: none; } .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable { --pf-v6-c-table__tr--BorderBlockEndWidth: 0; } .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody, .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded { border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor); } .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected { --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0; --pf-v6-c-table__expandable-row--after--BorderColor: transparent; } .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) { display: grid; grid-template-columns: 1fr; height: auto; grid-auto-columns: max-content; grid-column-gap: var(--pf-v6-c-table__tr--responsive--GridColumnGap); padding-block-start: var(--pf-v6-c-table__tr--responsive--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-table__tr--responsive--PaddingInlineEnd); padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingInlineStart); } .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) { padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingInlineEnd); padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart); } .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child { --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart); } .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact { --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart); --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd); --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart); --pf-v6-c-table--cell--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd); --pf-v6-c-table__check--responsive--MarginBlockStart: var(--pf-v6-c-table--m-compact__check--responsive--MarginBlockStart); --pf-v6-c-table__check--input--MarginBlockStart: 0; } .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action { margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart); margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart); } .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button { margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd); } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__icon > * { text-align: start; } .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] { --pf-v6-c-table--cell--hidden-visible--Display: var(--pf-v6-c-table--m-grid--cell--hidden-visible--Display); grid-column: 1; grid-column-gap: var(--pf-v6-c-table-td--responsive--GridColumnGap); grid-template-columns: 1fr minmax(0, 1.5fr); align-items: start; } .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action { align-items: center; } .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * { grid-column: 2; } .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before { position: revert; font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight); text-align: start; content: attr(data-label); } .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child { --pf-v6-c-table--cell--PaddingInlineStart: 0; } .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child { --pf-v6-c-table--cell--PaddingInlineEnd: 0; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table { --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart); --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd); --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd); --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart); border: 0; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle { --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0; --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0; --pf-v6-c-table__compound-expansion-toggle__button--after--InsetBlockStart: 100%; } .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) { position: relative; } .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody)::after { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; content: ""; border: 0; border-inline-start: var(--pf-v6-c-table__tbody--after--BorderInlineStartWidth) solid var(--pf-v6-c-table__tbody--after--BorderColor); } .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--after--border-width--base); } .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tbody:where(.pf-v6-c-table__tbody) { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0; } .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :first-child:not(.pf-v6-c-table__check)::after { --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0; position: static; width: auto; background-color: transparent; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row { --pf-v6-c-table--cell--responsive--PaddingBlockStart: 0; --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0; --pf-v6-c-table--cell--responsive--PaddingBlockEnd: 0; --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0; --pf-v6-c-table--cell--PaddingInlineEnd: 0; --pf-v6-c-table--cell--PaddingInlineStart: 0; display: block; max-height: var(--pf-v6-c-table__expandable-row--MaxHeight); overflow-y: auto; border-block-end: none; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) { position: static; display: block; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row.pf-m-expanded { border-block-start-color: var(--pf-v6-c-table--BorderColor); } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row > :first-child:not(.pf-v6-c-table__check)::after { content: none; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content, .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content { padding: 0; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row:not(.pf-m-expanded) { display: none; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content { padding-inline-end: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd); padding-inline-start: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart); } .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable { --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0; --pf-v6-c-table__tbody--after--BorderInlineStartColor: transparent; } .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable, .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr) { position: relative; } .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr)::after { content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; width: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth); background-color: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartColor); } .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-expanded { --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartWidth); --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartColor); } .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-selected { --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartWidth); --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartColor); } .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected::after { content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; width: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartWidth); background-color: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartColor); } .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__toggle, .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__check, .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__favorite, .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__action { width: auto; padding: 0; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__toggle { grid-row-start: 20; grid-column: -1; justify-self: end; padding-inline-end: 0; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__toggle::after { content: none; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__button { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart); } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__check, .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__favorite, .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action { grid-row-start: 1; grid-column-start: 2; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__check { margin-block-start: var(--pf-v6-c-table__check--responsive--MarginBlockStart); margin-inline-start: var(--pf-v6-c-table__check--responsive--MarginInlineStart); line-height: 1; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite { margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart); } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart); } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table__action--responsive--MarginInlineStart); } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__check label { display: inline-block; margin: 0; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__favorite { margin-block-start: var(--pf-v6-c-table--m-grid__favorite--MarginBlockStart); } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__favorite ~ .pf-v6-c-table__action { margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart); } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action { text-align: end; } @media screen and (max-width: 36rem) { .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action { grid-row-start: 1; grid-column-start: 2; margin-inline-start: 0; } } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action { grid-column: 2; grid-row: 2; } .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__toggle-icon { transition: var(--pf-v6-c-table__toggle__icon--Transition); } .pf-v6-c-button.pf-m-expanded > .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__toggle-icon { transform: rotate(var(--pf-v6-c-table__toggle--m-expanded__icon--Rotate)); } .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-nowrap { --pf-v6-c-table--cell--Overflow: auto; } .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-fit-content { width: auto; white-space: normal; } .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-truncate { --pf-v6-c-table--cell--MaxWidth: 100%; } .pf-m-grid-2xl.pf-v6-c-table [class*=pf-m-width] { --pf-v6-c-table--cell--Width: auto; } } .pf-v6-c-table { --pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem; --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base); --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto; --pf-v6-c-table__sticky-cell--InsetInlineStart: auto; --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default); --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartColor: var(--pf-t--global--border--color--default); --pf-v6-c-table__sticky-cell--m-right--InsetInlineEnd: 0; --pf-v6-c-table__sticky-cell--m-left--InsetInlineStart: 0; --pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-v6-c-table__sticky-cell--ZIndex) + 1); } .pf-v6-c-table .pf-v6-c-table__sticky-cell { position: sticky; inset-inline-start: var(--pf-v6-c-table__sticky-cell--InsetInlineStart); inset-inline-end: var(--pf-v6-c-table__sticky-cell--InsetInlineEnd); z-index: var(--pf-v6-c-table__sticky-cell--ZIndex); min-width: var(--pf-v6-c-table__sticky-cell--MinWidth); } .pf-v6-c-table__sticky-cell { --pf-v6-c-table--cell--Overflow: visible; --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex); background-color: var(--pf-v6-c-table__sticky-cell--BackgroundColor); background-clip: padding-box; } .pf-v6-c-table__sticky-cell.pf-m-border-right::before { --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndWidth: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth); --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndColor: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor); } .pf-v6-c-table__sticky-cell.pf-m-border-left::before { --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartWidth: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth); --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartColor: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartColor); } .pf-v6-c-table__sticky-cell.pf-m-right, .pf-v6-c-table__sticky-cell.pf-m-inline-end { --pf-v6-c-table__sticky-cell--InsetInlineEnd: var(--pf-v6-c-table__sticky-cell--m-right--InsetInlineEnd); } .pf-v6-c-table__sticky-cell.pf-m-left, .pf-v6-c-table__sticky-cell.pf-m-inline-start { --pf-v6-c-table__sticky-cell--InsetInlineStart: var(--pf-v6-c-table__sticky-cell--m-left--InsetInlineStart); } .pf-v6-c-scroll-outer-wrapper { --pf-v6-c-scroll-outer-wrapper--MinHeight: 25rem; --pf-v6-c-scroll-outer-wrapper--MaxHeight: 100%; display: flex; flex-direction: column; max-width: 100%; min-height: var(--pf-v6-c-scroll-outer-wrapper--MinHeight); max-height: var(--pf-v6-c-scroll-outer-wrapper--MaxHeight); overflow: hidden; } .pf-v6-c-scroll-inner-wrapper { display: flex; flex-direction: column; max-width: 100%; max-height: 100%; overflow: auto; } .pf-v6-c-table { --pf-v6-c-table__tree-view-main--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-table__tree-view-icon--MinWidth)); --pf-v6-c-table__tree-view-main--nested-indent--base: calc(var(--pf-v6-c-table__tree-view-main--indent--base) - var(--pf-t--global--spacer--md)); --pf-v6-c-table__tree-view-main--c-button--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__tree-view-main--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base); --pf-v6-c-table__tree-view-main--MarginInlineStart: calc(var(--pf-v6-c-table--cell--PaddingInlineStart) * -1); --pf-v6-c-table__tree-view-main--c-table__check--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__tree-view-main--c-table__check--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__tree-view-icon--MinWidth: var(--pf-t--global--spacer--md); --pf-v6-c-table__tree-view-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-tree-view__toggle--Position: absolute; --pf-v6-c-table--m-tree-view__toggle--InsetInlineStart: var(--pf-v6-c-table__tree-view-main--PaddingInlineStart); --pf-v6-c-table--m-tree-view__toggle--TranslateX: -100%; --pf-v6-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-no-inset__tree-view-main--PaddingInlineStart: 0; --pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart: 0; } .pf-v6-c-table.pf-m-tree-view > tbody > tr { --pf-v6-c-table--m-tree-view__toggle--InsetInlineStart: var(--pf-v6-c-table__tree-view-main--PaddingInlineStart); } .pf-v6-c-table.pf-m-tree-view > tbody > tr.pf-m-no-inset { --pf-v6-c-table__tree-view-main--PaddingInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--PaddingInlineStart); --pf-v6-c-table__tree-view-main--MarginInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart); } .pf-v6-c-table.pf-m-tree-view.pf-m-no-inset { --pf-v6-c-table__tree-view-main--PaddingInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--PaddingInlineStart); --pf-v6-c-table__tree-view-main--MarginInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart); } .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="2"] { --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="3"] { --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="4"] { --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="5"] { --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="6"] { --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="7"] { --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="8"] { --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="9"] { --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="10"] { --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-v6-c-table__tree-view-main { position: relative; display: flex; align-items: baseline; min-width: 0; padding-inline-start: var(--pf-v6-c-table__tree-view-main--PaddingInlineStart); margin-inline-start: var(--pf-v6-c-table__tree-view-main--MarginInlineStart); text-align: start; cursor: pointer; } .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle { transform: translateX(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX)); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle { transform: translateX(calc(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier))); } .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle { position: var(--pf-v6-c-table--m-tree-view__toggle--Position); inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart); } .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon { min-width: var(--pf-v6-c-table--m-tree-view__toggle__toggle-icon--MinWidth); } .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle .pf-v6-c-button { margin-block-start: -50%; margin-inline-end: var(--pf-v6-c-table__tree-view-main--c-button--MarginInlineEnd); } .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check { margin-inline-end: var(--pf-v6-c-table__tree-view-main--c-table__check--MarginInlineEnd); } .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check label { padding-inline-end: var(--pf-v6-c-table__tree-view-main--c-table__check--PaddingInlineEnd); margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: calc(var(--pf-v6-c-table__tree-view-main--c-table__check--MarginInlineEnd) * -1); } .pf-v6-c-table__tree-view-text { display: flex; } .pf-v6-c-table__tree-view-icon { min-width: var(--pf-v6-c-table__tree-view-icon--MinWidth); margin-inline-end: var(--pf-v6-c-table__tree-view-icon--MarginInlineEnd); } .pf-v6-c-table__tree-view-details-toggle { display: none; } .pf-m-tree-view-grid.pf-v6-c-table { --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base); --pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart: 0; --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr)); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd: 0; --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4; --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart); --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd); --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); } .pf-m-tree-view-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) { position: relative; outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset); border: none; } .pf-m-tree-view-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart); inset-inline-end: 0; content: ""; border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor); } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not([hidden]) { display: grid; grid-template-columns: 1fr max-content; } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart); } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell ~ .pf-v6-c-table__action { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart); } .pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td):not(.pf-v6-c-table__tree-view-title-cell) { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart); } .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tree-view-text { padding-inline-end: var(--pf-v6-c-table__tree-view-text--PaddingInlineEnd); } .pf-m-tree-view-grid.pf-v6-c-table thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th) { display: none; } .pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td) { display: none; } .pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] { grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns); grid-column: 1; column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap); align-items: start; } .pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) { grid-column: 2; } .pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before { position: revert; font-weight: var(--pf-t--global--font--weight--body--bold); text-align: start; content: attr(data-label); } .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before { border-inline-end: 0; } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded { padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd); } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v6-c-table__td)[data-label] { display: grid; } .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__thead { display: none; } .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle, .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__action { display: inline-block; } .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__action { --pf-v6-c-table--cell--Width: auto; --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd); grid-row: 1; grid-column: 2; margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart); margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd); } .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check { order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order); margin-inline-start: auto; margin-inline-end: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd); } .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle { margin-block-start: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockStart); margin-block-end: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd); } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="2"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="3"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="4"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="5"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="6"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="7"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="8"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="9"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="10"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base)); } @media screen and (max-width: calc(48rem - 1px)) { .pf-m-tree-view-grid-md.pf-v6-c-table { --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base); --pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart: 0; --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr)); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd: 0; --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4; --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart); --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd); --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); } .pf-m-tree-view-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) { position: relative; outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset); border: none; } .pf-m-tree-view-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart); inset-inline-end: 0; content: ""; border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor); } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not([hidden]) { display: grid; grid-template-columns: 1fr max-content; } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart); } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell ~ .pf-v6-c-table__action { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart); } .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td):not(.pf-v6-c-table__tree-view-title-cell) { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart); } .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tree-view-text { padding-inline-end: var(--pf-v6-c-table__tree-view-text--PaddingInlineEnd); } .pf-m-tree-view-grid-md.pf-v6-c-table thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th) { display: none; } .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td) { display: none; } .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] { grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns); grid-column: 1; column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap); align-items: start; } .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) { grid-column: 2; } .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before { position: revert; font-weight: var(--pf-t--global--font--weight--body--bold); text-align: start; content: attr(data-label); } .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before { border-inline-end: 0; } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded { padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd); } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v6-c-table__td)[data-label] { display: grid; } .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__thead { display: none; } .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle, .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__action { display: inline-block; } .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__action { --pf-v6-c-table--cell--Width: auto; --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd); grid-row: 1; grid-column: 2; margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart); margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd); } .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check { order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order); margin-inline-start: auto; margin-inline-end: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd); } .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle { margin-block-start: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockStart); margin-block-end: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd); } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="2"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="3"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="4"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="5"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="6"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="7"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="8"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="9"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="10"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base)); } } @media screen and (max-width: calc(62rem - 1px)) { .pf-m-tree-view-grid-lg.pf-v6-c-table { --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base); --pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart: 0; --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr)); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd: 0; --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4; --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart); --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd); --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); } .pf-m-tree-view-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) { position: relative; outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset); border: none; } .pf-m-tree-view-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart); inset-inline-end: 0; content: ""; border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor); } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not([hidden]) { display: grid; grid-template-columns: 1fr max-content; } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart); } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell ~ .pf-v6-c-table__action { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart); } .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td):not(.pf-v6-c-table__tree-view-title-cell) { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart); } .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tree-view-text { padding-inline-end: var(--pf-v6-c-table__tree-view-text--PaddingInlineEnd); } .pf-m-tree-view-grid-lg.pf-v6-c-table thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th) { display: none; } .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td) { display: none; } .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] { grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns); grid-column: 1; column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap); align-items: start; } .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) { grid-column: 2; } .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before { position: revert; font-weight: var(--pf-t--global--font--weight--body--bold); text-align: start; content: attr(data-label); } .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before { border-inline-end: 0; } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded { padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd); } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v6-c-table__td)[data-label] { display: grid; } .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__thead { display: none; } .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle, .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__action { display: inline-block; } .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__action { --pf-v6-c-table--cell--Width: auto; --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd); grid-row: 1; grid-column: 2; margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart); margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd); } .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check { order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order); margin-inline-start: auto; margin-inline-end: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd); } .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle { margin-block-start: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockStart); margin-block-end: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd); } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="2"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="3"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="4"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="5"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="6"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="7"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="8"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="9"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="10"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base)); } } @media screen and (max-width: calc(75rem - 1px)) { .pf-m-tree-view-grid-xl.pf-v6-c-table { --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base); --pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart: 0; --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr)); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd: 0; --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4; --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart); --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd); --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); } .pf-m-tree-view-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) { position: relative; outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset); border: none; } .pf-m-tree-view-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart); inset-inline-end: 0; content: ""; border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor); } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not([hidden]) { display: grid; grid-template-columns: 1fr max-content; } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart); } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell ~ .pf-v6-c-table__action { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart); } .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td):not(.pf-v6-c-table__tree-view-title-cell) { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart); } .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tree-view-text { padding-inline-end: var(--pf-v6-c-table__tree-view-text--PaddingInlineEnd); } .pf-m-tree-view-grid-xl.pf-v6-c-table thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th) { display: none; } .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td) { display: none; } .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] { grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns); grid-column: 1; column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap); align-items: start; } .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) { grid-column: 2; } .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before { position: revert; font-weight: var(--pf-t--global--font--weight--body--bold); text-align: start; content: attr(data-label); } .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before { border-inline-end: 0; } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded { padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd); } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v6-c-table__td)[data-label] { display: grid; } .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__thead { display: none; } .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle, .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__action { display: inline-block; } .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__action { --pf-v6-c-table--cell--Width: auto; --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd); grid-row: 1; grid-column: 2; margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart); margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd); } .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check { order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order); margin-inline-start: auto; margin-inline-end: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd); } .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle { margin-block-start: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockStart); margin-block-end: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd); } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="2"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="3"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="4"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="5"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="6"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="7"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="8"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="9"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="10"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base)); } } @media screen and (max-width: calc(90.625rem - 1px)) { .pf-m-tree-view-grid-2xl.pf-v6-c-table { --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base); --pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart: 0; --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr)); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd: 0; --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4; --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart); --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd); --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) { position: relative; outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset); border: none; } .pf-m-tree-view-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart); inset-inline-end: 0; content: ""; border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not([hidden]) { display: grid; grid-template-columns: 1fr max-content; } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell ~ .pf-v6-c-table__action { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart); } .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td):not(.pf-v6-c-table__tree-view-title-cell) { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart); } .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tree-view-text { padding-inline-end: var(--pf-v6-c-table__tree-view-text--PaddingInlineEnd); } .pf-m-tree-view-grid-2xl.pf-v6-c-table thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th) { display: none; } .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td) { display: none; } .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] { grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns); grid-column: 1; column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap); align-items: start; } .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) { grid-column: 2; } .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before { position: revert; font-weight: var(--pf-t--global--font--weight--body--bold); text-align: start; content: attr(data-label); } .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before { border-inline-end: 0; } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded { padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v6-c-table__td)[data-label] { display: grid; } .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__thead { display: none; } .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle, .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__action { display: inline-block; } .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__action { --pf-v6-c-table--cell--Width: auto; --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart); --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd); grid-row: 1; grid-column: 2; margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart); margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd); } .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check { order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order); margin-inline-start: auto; margin-inline-end: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd); } .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle { margin-block-start: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockStart); margin-block-end: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="2"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="3"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="4"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="5"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="6"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="7"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="8"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="9"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-v6-c-table__tree-view-main--indent--base)); } .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="10"] { --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base)); } } .pf-v6-c-form { --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default); --pf-v6-c-form__group--Gap: var(--pf-t--global--spacer--gap--group--vertical); --pf-v6-c-form__group--m-action--MarginBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem; --pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--gap--group--horizontal); --pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr; --pf-v6-c-form--m-limit-width--MaxWidth: 55rem; --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: calc((((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) + (2 * var(--pf-t--global--border--width--control--default))) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)) - ((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) + var(--pf-t--global--border--width--control--default)); --pf-v6-c-form__group-label--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart: 0; --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default))); --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-form__label--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-form__label--m-disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-form__label--hover--Cursor: pointer; --pf-v6-c-form__label--m-disabled--hover--Cursor: not-allowed; --pf-v6-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-form__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs); --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default); --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal); --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical); --pf-v6-c-form__group-control--m-inline--Gap: var(--pf-t--global--spacer--gap--group--horizontal); --pf-v6-c-form__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-form__group-control--m-stack--Gap: var(--pf-t--global--spacer--gap--group--vertical); --pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart: calc(var(--pf-v6-c-form__group-control--m-stack--Gap) * -1 + var(--pf-v6-c-form__helper-text--MarginBlockStart--base)); --pf-v6-c-form__actions--child--MarginBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-form__actions--child--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-form__actions--child--MarginBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-form__actions--child--MarginInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-form__actions--MarginBlockStart: calc(var(--pf-v6-c-form__actions--child--MarginBlockStart) * -1); --pf-v6-c-form__actions--MarginInlineEnd: calc(var(--pf-v6-c-form__actions--child--MarginInlineEnd) * -1); --pf-v6-c-form__actions--MarginBlockEnd: calc(var(--pf-v6-c-form__actions--child--MarginBlockEnd) * -1); --pf-v6-c-form__actions--MarginInlineStart: calc(var(--pf-v6-c-form__actions--child--MarginInlineStart) * -1); --pf-v6-c-form__helper-text--MarginBlockStart--base: var(--pf-t--global--spacer--xs); --pf-v6-c-form__helper-text--MarginBlockStart: var(--pf-v6-c-form__helper-text--MarginBlockStart--base); --pf-v6-c-form__section--MarginBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-form__section--Gap: var(--pf-v6-c-form--GridGap); --pf-v6-c-form__section-title--FontSize: var(--pf-t--global--font--size--heading--xs); --pf-v6-c-form__section-title--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-form__section-title--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1); --pf-v6-c-form__field-group--border-width-base: var(--pf-t--global--border--width--divider--default); --pf-v6-c-form__field-group--BorderBlockStartWidth: var(--pf-v6-c-form__field-group--border-width-base); --pf-v6-c-form__field-group--BorderBlockStartColor: var(--pf-t--global--border--color--default); --pf-v6-c-form__field-group--BorderBlockEndWidth: var(--pf-v6-c-form__field-group--border-width-base); --pf-v6-c-form__field-group--BorderBlockEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-form__field-group--field-group--MarginBlockStart: calc(var(--pf-v6-c-form--GridGap) * -1); --pf-v6-c-form__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-form__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs)); --pf-v6-c-form__field-group-toggle--PaddingBlockStart: var(--pf-v6-c-form__field-group-header--PaddingBlockStart); --pf-v6-c-form__field-group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default); --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base); --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default); --pf-v6-c-form__field-group-toggle-icon--Rotate: 0; --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: -180deg; --pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-form__field-group-header--GridColumn: 1 / 3; --pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-form__field-group-toggle--field-group-header--GridColumn: 2 / 3; --pf-v6-c-form__field-group__field-group--field-group__field-group-header--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base); --pf-v6-c-form__field-group-header-description--MarginBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-form__field-group-header-description--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-form__field-group-header-actions--MarginInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-form__field-group-header-actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-form__field-group-header-actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1); --pf-v6-c-form__field-group-body--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-form__field-group-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-form__field-group-body--Gap: var(--pf-v6-c-form--GridGap); --pf-v6-c-form__field-group-body--GridColumn: 2 / 3; --pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3; --pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3; --pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1); --pf-v6-c-form__field-group-body--TranslateY: 0; --pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0; --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s; --pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s; --pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short); } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-form { --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-form__field-group-body--TranslateY: -.5rem; } } .pf-v6-c-form { display: grid; gap: var(--pf-v6-c-form--GridGap); } .pf-v6-c-form.pf-m-horizontal.pf-m-align-right .pf-v6-c-form__label { text-align: end; } @media screen and (min-width: 48rem) { .pf-v6-c-form.pf-m-horizontal { --pf-v6-c-form__group-label--PaddingBlockEnd: 0; } .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group { display: grid; grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth); column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap); } .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label { padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart); } .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-no-padding-top { --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart); transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY)); } .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info { --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap); flex-direction: column; align-items: flex-start; } .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main { flex-grow: 0; } .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-control { grid-column: 2; } } @media screen and (min-width: 0) { .pf-v6-c-form.pf-m-horizontal-on-xs { --pf-v6-c-form__group-label--PaddingBlockEnd: 0; } .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group { display: grid; grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth); column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap); } .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label { padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart); } .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-no-padding-top { --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart); transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY)); } .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info { --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap); flex-direction: column; align-items: flex-start; } .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main { flex-grow: 0; } .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-control { grid-column: 2; } } @media (min-width: 36rem) { .pf-v6-c-form.pf-m-horizontal-on-sm { --pf-v6-c-form__group-label--PaddingBlockEnd: 0; } .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group { display: grid; grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth); column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap); } .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label { padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart); } .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-no-padding-top { --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart); transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY)); } .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info { --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap); flex-direction: column; align-items: flex-start; } .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main { flex-grow: 0; } .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-control { grid-column: 2; } } @media (min-width: 48rem) { .pf-v6-c-form.pf-m-horizontal-on-md { --pf-v6-c-form__group-label--PaddingBlockEnd: 0; } .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group { display: grid; grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth); column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap); } .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label { padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart); } .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-no-padding-top { --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart); transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY)); } .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info { --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap); flex-direction: column; align-items: flex-start; } .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main { flex-grow: 0; } .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-control { grid-column: 2; } } @media (min-width: 62rem) { .pf-v6-c-form.pf-m-horizontal-on-lg { --pf-v6-c-form__group-label--PaddingBlockEnd: 0; } .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group { display: grid; grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth); column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap); } .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label { padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart); } .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-no-padding-top { --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart); transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY)); } .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info { --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap); flex-direction: column; align-items: flex-start; } .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main { flex-grow: 0; } .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-control { grid-column: 2; } } @media (min-width: 75rem) { .pf-v6-c-form.pf-m-horizontal-on-xl { --pf-v6-c-form__group-label--PaddingBlockEnd: 0; } .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group { display: grid; grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth); column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap); } .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label { padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart); } .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-no-padding-top { --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart); transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY)); } .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info { --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap); flex-direction: column; align-items: flex-start; } .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main { flex-grow: 0; } .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-control { grid-column: 2; } } @media (min-width: 90.625rem) { .pf-v6-c-form.pf-m-horizontal-on-2xl { --pf-v6-c-form__group-label--PaddingBlockEnd: 0; } .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group { display: grid; grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth); column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap); } .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label { padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart); } .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-no-padding-top { --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart); transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY)); } .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info { --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap); flex-direction: column; align-items: flex-start; } .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main { flex-grow: 0; } .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-control { grid-column: 2; } } .pf-v6-c-form.pf-m-limit-width { max-width: var(--pf-v6-c-form--m-limit-width--MaxWidth); } .pf-v6-c-form__group { display: flex; flex-direction: column; gap: var(--pf-v6-c-form__group--Gap); min-width: 0; } .pf-v6-c-form__group.pf-m-action { margin-block-start: var(--pf-v6-c-form__group--m-action--MarginBlockStart); overflow: hidden; } .pf-v6-c-form__section { display: grid; gap: var(--pf-v6-c-form__section--Gap); } .pf-v6-c-form__section + .pf-v6-c-form__group:not(.pf-m-action), .pf-v6-c-form__section:not(:first-child) { margin-block-start: var(--pf-v6-c-form__section--MarginBlockStart); } .pf-v6-c-form__section-title { margin-block-end: var(--pf-v6-c-form__section-title--MarginBlockEnd); font-size: var(--pf-v6-c-form__section-title--FontSize); font-weight: var(--pf-v6-c-form__section-title--FontWeight); } .pf-v6-c-form__group-label { --pf-v6-c-form__helper-text--MarginBlockStart: 0; } .pf-v6-c-form__group-label.pf-m-info { display: flex; gap: var(--pf-v6-c-form__group-label--m-info--Gap); align-items: flex-end; } .pf-v6-c-form__group-label-main { flex-grow: 1; } .pf-v6-c-form__group-label-info { font-size: var(--pf-v6-c-form__group-label-info--FontSize); } .pf-v6-c-form__label { font-size: var(--pf-v6-c-form__label--FontSize); line-height: var(--pf-v6-c-form__label--LineHeight); } .pf-v6-c-form__label:not(.pf-m-disabled):hover { cursor: var(--pf-v6-c-form__label--hover--Cursor); } .pf-v6-c-form__label.pf-m-disabled { color: var(--pf-v6-c-form__label--m-disabled--Color); } .pf-v6-c-form__label.pf-m-disabled:hover { cursor: var(--pf-v6-c-form__label--m-disabled--hover--Cursor); } .pf-v6-c-form__label-text { font-weight: var(--pf-v6-c-form__label-text--FontWeight); } .pf-v6-c-form__label-required { margin-inline-start: var(--pf-v6-c-form__label-required--MarginInlineStart); font-size: var(--pf-v6-c-form__label-required--FontSize); color: var(--pf-v6-c-form__label-required--Color); } .pf-v6-c-form__group-label-help .pf-v6-c-button { --pf-v6-c-button--FontSize: var(--pf-v6-c-form__group-label-help--FontSize); } .pf-v6-c-form__group-control { min-width: 0; } .pf-v6-c-form__group-control.pf-m-inline { display: flex; flex-flow: row wrap; gap: var(--pf-v6-c-form__group-control--m-inline--Gap); } .pf-v6-c-form__group-control.pf-m-stack { --pf-v6-c-form__helper-text--MarginBlockStart: var(--pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart); display: grid; gap: var(--pf-v6-c-form__group-control--m-stack--Gap); } .pf-v6-c-form__group-control .pf-v6-c-form__helper-text:first-child { --pf-v6-c-form__helper-text--MarginBlockStart: 0; margin-block-end: var(--pf-v6-c-form__group-control__helper-text--MarginBlockEnd); } .pf-v6-c-form__helper-text { margin-block-start: var(--pf-v6-c-form__helper-text--MarginBlockStart); } .pf-v6-c-form__helper-text.pf-m-inactive { display: none; } .pf-v6-c-form__helper-text.pf-m-hidden { visibility: hidden; opacity: 0; } .pf-v6-c-form__fieldset { border: 0; } .pf-v6-c-form__actions { display: flex; flex-wrap: wrap; margin-block-start: var(--pf-v6-c-form__actions--MarginBlockStart); margin-block-end: var(--pf-v6-c-form__actions--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-form__actions--MarginInlineStart); margin-inline-end: var(--pf-v6-c-form__actions--MarginInlineEnd); } .pf-v6-c-form__actions > * { margin-block-start: var(--pf-v6-c-form__actions--child--MarginBlockStart); margin-block-end: var(--pf-v6-c-form__actions--child--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-form__actions--child--MarginInlineStart); margin-inline-end: var(--pf-v6-c-form__actions--child--MarginInlineEnd); } .pf-v6-c-form__field-group { --pf-v6-c-form__field-group--BorderBlockStartWidth: var(--pf-v6-c-form__field-group--border-width-base); display: grid; grid-template-columns: minmax(var(--pf-v6-c-form__field-group--GridTemplateColumns--toggle), max-content) 1fr; border-block-start: var(--pf-v6-c-form__field-group--BorderBlockStartWidth) solid var(--pf-v6-c-form__field-group--BorderBlockStartColor); border-block-end: var(--pf-v6-c-form__field-group--BorderBlockEndWidth) solid var(--pf-v6-c-form__field-group--BorderBlockEndColor); } .pf-v6-c-form__field-group:last-child { --pf-v6-c-form__field-group--BorderBlockEndWidth: 0; } .pf-v6-c-form__field-group + .pf-v6-c-form__field-group, .pf-v6-c-form__field-group:first-child { --pf-v6-c-form__field-group--BorderBlockStartWidth: 0; } .pf-v6-c-form__field-group + .pf-v6-c-form__field-group { margin-block-start: var(--pf-v6-c-form__field-group--field-group--MarginBlockStart); } .pf-v6-c-form__field-group .pf-v6-c-form__field-group { --pf-v6-c-form__field-group-body--GridColumn: var(--pf-v6-c-form__field-group__field-group__field-group-body--GridColumn); --pf-v6-c-form__field-group-toggle--PaddingBlockStart: var(--pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart); --pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockStart); --pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockEnd); --pf-v6-c-form__field-group-body--PaddingBlockStart: 0; } .pf-v6-c-form__field-group .pf-v6-c-form__field-group .pf-v6-c-form__field-group-toggle ~ .pf-v6-c-form__field-group-body { --pf-v6-c-form__field-group-body--GridColumn: var(--pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn); } .pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle { --pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate); } .pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body { visibility: visible; max-height: 99999px; padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart); padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd); opacity: 1; translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY); transition-delay: 0s; transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s; } .pf-v6-c-form__field-group-toggle { grid-row: 1/2; grid-column: 1/2; padding-block-start: var(--pf-v6-c-form__field-group-toggle--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-form__field-group-toggle--PaddingInlineEnd); } .pf-v6-c-form__field-group-toggle + .pf-v6-c-form__field-group-header { --pf-v6-c-form__field-group-header--GridColumn: var(--pf-v6-c-form__field-group-toggle--field-group-header--GridColumn); } .pf-v6-c-form__field-group-toggle-button { margin-block-start: var(--pf-v6-c-form__field-group-toggle-button--MarginBlockStart); margin-block-end: var(--pf-v6-c-form__field-group-toggle-button--MarginBlockEnd); } .pf-v6-c-form__field-group-toggle-icon { display: inline-block; min-width: var(--pf-v6-c-form__field-group-toggle-icon--MinWidth); text-align: center; transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate)); transition-timing-function: var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction); transition-duration: var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration); transition-property: transform; } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-form__field-group-toggle-icon { scale: -1 1; } .pf-v6-c-form__field-group-header { display: flex; grid-row: 1/2; grid-column: var(--pf-v6-c-form__field-group-header--GridColumn); align-items: flex-start; padding-block-start: var(--pf-v6-c-form__field-group-header--PaddingBlockStart); padding-block-end: var(--pf-v6-c-form__field-group-header--PaddingBlockEnd); } .pf-v6-c-form__field-group-header-main { display: flex; flex-grow: 1; flex-direction: column; } .pf-v6-c-form__field-group-header-title { display: flex; } .pf-v6-c-form__field-group-header-title-text { flex-grow: 1; } .pf-v6-c-form__field-group-header-description { margin-block-start: var(--pf-v6-c-form__field-group-header-description--MarginBlockStart); color: var(--pf-v6-c-form__field-group-header-description--Color); } .pf-v6-c-form__field-group-header-actions { margin-block-start: var(--pf-v6-c-form__field-group-header-actions--MarginBlockStart); margin-block-end: var(--pf-v6-c-form__field-group-header-actions--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-form__field-group-header-actions--MarginInlineStart); white-space: nowrap; } .pf-v6-c-form__field-group-body { display: grid; grid-column: var(--pf-v6-c-form__field-group-body--GridColumn); gap: var(--pf-v6-c-form__field-group-body--Gap); padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart); padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd); } .pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body { visibility: hidden; max-height: 0; padding-block-start: 0; padding-block-end: 0; opacity: 0; translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY); transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade); transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s; transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end; } .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child { --pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0; --pf-v6-c-form__field-group-header--PaddingBlockStart: 0; } .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:last-child { margin-block-end: var(--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd); } .pf-v6-u-screen-reader { position: fixed; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%); } .pf-v6-u-visible { position: static; overflow: visible; white-space: normal; border: inherit; clip-path: revert; } .pf-v6-u-hidden { display: none !important; } @media screen and (min-width: 36rem) { .pf-v6-u-screen-reader-on-sm { position: fixed; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%); } } @media screen and (min-width: 36rem) { .pf-v6-u-visible-on-sm { position: static; overflow: visible; white-space: normal; border: inherit; clip-path: revert; } } @media screen and (min-width: 36rem) { .pf-v6-u-hidden-on-sm { display: none !important; } } @media screen and (min-width: 48rem) { .pf-v6-u-screen-reader-on-md { position: fixed; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%); } } @media screen and (min-width: 48rem) { .pf-v6-u-visible-on-md { position: static; overflow: visible; white-space: normal; border: inherit; clip-path: revert; } } @media screen and (min-width: 48rem) { .pf-v6-u-hidden-on-md { display: none !important; } } @media screen and (min-width: 62rem) { .pf-v6-u-screen-reader-on-lg { position: fixed; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%); } } @media screen and (min-width: 62rem) { .pf-v6-u-visible-on-lg { position: static; overflow: visible; white-space: normal; border: inherit; clip-path: revert; } } @media screen and (min-width: 62rem) { .pf-v6-u-hidden-on-lg { display: none !important; } } @media screen and (min-width: 75rem) { .pf-v6-u-screen-reader-on-xl { position: fixed; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%); } } @media screen and (min-width: 75rem) { .pf-v6-u-visible-on-xl { position: static; overflow: visible; white-space: normal; border: inherit; clip-path: revert; } } @media screen and (min-width: 75rem) { .pf-v6-u-hidden-on-xl { display: none !important; } } @media screen and (min-width: 90.625rem) { .pf-v6-u-screen-reader-on-2xl { position: fixed; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%); } } @media screen and (min-width: 90.625rem) { .pf-v6-u-visible-on-2xl { position: static; overflow: visible; white-space: normal; border: inherit; clip-path: revert; } } @media screen and (min-width: 90.625rem) { .pf-v6-u-hidden-on-2xl { display: none !important; } } .pf-v6-c-tooltip { --pf-v6-c-tooltip--MaxWidth: 18.75rem; --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md); --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse); --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default); --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-tooltip__arrow--Width: 0.9375rem; --pf-v6-c-tooltip__arrow--Height: 0.9375rem; --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default); --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md); --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%; --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%; --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg; --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%; --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%; --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg; --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%; --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%; --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg; --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%; --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%; --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg; } .pf-v6-c-tooltip { position: relative; max-width: var(--pf-v6-c-tooltip--MaxWidth); box-shadow: var(--pf-v6-c-tooltip--BoxShadow); } .pf-v6-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right) { --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0); --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%); --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX); --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY); --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate); } .pf-v6-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right) { --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0); --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%); --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX); --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY); --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate); } .pf-v6-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom) { --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%); --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0); --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX); --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY); --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate); } .pf-v6-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom) { --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%); --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0); --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX); --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY); --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate); } .pf-v6-c-tooltip:is(.pf-m-left-top, .pf-m-right-top) { --pf-v6-c-tooltip__arrow--InsetBlockStart: 0; --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY); } .pf-v6-c-tooltip:is(.pf-m-left-bottom, .pf-m-right-bottom) { --pf-v6-c-tooltip__arrow--InsetBlockStart: auto; --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0; } .pf-v6-c-tooltip:is(.pf-m-top-left, .pf-m-bottom-left) { --pf-v6-c-tooltip__arrow--InsetInlineStart: 0; --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX); } .pf-v6-c-tooltip:is(.pf-m-top-right, .pf-m-bottom-right) { --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0; --pf-v6-c-tooltip__arrow--InsetInlineStart: auto; } .pf-v6-c-tooltip__content { position: relative; padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart); padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd); font-size: var(--pf-v6-c-tooltip__content--FontSize); color: var(--pf-v6-c-tooltip__content--Color); text-align: center; overflow-wrap: break-word; background-color: var(--pf-v6-c-tooltip__content--BackgroundColor); border-radius: var(--pf-v6-c-tooltip__content--BorderRadius); } .pf-v6-c-tooltip__content.pf-m-text-align-left { text-align: start; } .pf-v6-c-tooltip__arrow { position: absolute; top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto); right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto); bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto); left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto); width: var(--pf-v6-c-tooltip__arrow--Width); height: var(--pf-v6-c-tooltip__arrow--Height); pointer-events: none; background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor); box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow); transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0)); } .pf-v6-c-popover[data-popper-reference-hidden=true] { visibility: hidden; pointer-events: none; } .pf-v6-c-button { --pf-v6-c-button--Display: inline-flex; --pf-v6-c-button--AlignItems: baseline; --pf-v6-c-button--JustifyContent: center; --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-button--MinWidth: calc(1lh + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd)); --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default); --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default); --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-button--BackgroundColor: transparent; --pf-v6-c-button--BorderColor: transparent; --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default); --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-button--TextDecorationLine: none; --pf-v6-c-button--TextDecorationStyle: none; --pf-v6-c-button--TextDecorationColor: currentcolor; --pf-v6-c-button--TransitionDelay: 0s; --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-button--TransitionProperty: color, background, border-color; --pf-v6-c-button--ScaleX: 1; --pf-v6-c-button--ScaleY: 1; --pf-v6-c-button--border--offset: 0; --pf-v6-c-button--hover--BackgroundColor: transparent; --pf-v6-c-button--hover--BorderColor: transparent; --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover); --pf-v6-c-button--hover--TextDecorationLine: none; --pf-v6-c-button--hover--TextDecorationStyle: none; --pf-v6-c-button--hover--TextDecorationColor: currentcolor; --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover); --pf-v6-c-button--hover--ScaleX: 1; --pf-v6-c-button--hover--ScaleY: 1; --pf-v6-c-button--m-clicked--BackgroundColor: transparent; --pf-v6-c-button--m-clicked--BorderColor: transparent; --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked); --pf-v6-c-button--m-clicked--TextDecorationLine: none; --pf-v6-c-button--m-clicked--TextDecorationStyle: none; --pf-v6-c-button--m-clicked--TextDecorationColor: currentcolor; --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default); --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default); --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default); --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover); --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover); --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover); --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked); --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked); --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked); --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default); --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default); --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover); --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover); --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked); --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked); --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked); --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default); --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default); --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default); --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover); --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover); --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover); --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked); --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked); --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked); --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default); --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover); --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked); --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked); --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default); --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default); --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default); --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default); --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked); --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked); --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact); --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact); --pf-v6-c-button--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-button--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); --pf-v6-c-button--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-button--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-button--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-button--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default); --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default); --pf-v6-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover); --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover); --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked); --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked); --pf-v6-c-button--m-link--m-inline--Display: inline-flex; --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start; --pf-v6-c-button--m-link--m-inline--FontSize: initial; --pf-v6-c-button--m-link--m-inline--LineHeight: initial; --pf-v6-c-button--m-link--m-inline--FontWeight: initial; --pf-v6-c-button--m-link--m-inline--PaddingBlockStart: 0; --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0; --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0; --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0; --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default); --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default); --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default); --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default); --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover); --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover); --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover); --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover); --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover); --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover); --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover); --pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover); --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset; --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg); --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default); --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs); --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm)); --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled); --pf-v6-c-button--span--m-link--m-inline--Display: inline; --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default); --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover); --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked); --pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked); --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default); --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default); --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default); --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled); --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent; --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact); --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact); --pf-v6-c-button--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-button--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); --pf-v6-c-button--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-button--m-plain--BorderColor: transparent; --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto; --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: 0; --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0; --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: 0; --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: 0; --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart: 0; --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd: 0; --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle); --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor: transparent; --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent; --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent; --pf-v6-c-button--m-plain--m-no-padding--border--offset: calc(0.125rem * -1); --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element); --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--control--default); --pf-v6-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-button--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-button--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover); --pf-v6-c-button--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked); --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--action--plain--default); --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--control--default); --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-button--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default); --pf-v6-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default); --pf-v6-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default); --pf-v6-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover); --pf-v6-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--hover); --pf-v6-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover); --pf-v6-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked); --pf-v6-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--clicked); --pf-v6-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked); --pf-v6-c-button--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default); --pf-v6-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default); --pf-v6-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default); --pf-v6-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover); --pf-v6-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover); --pf-v6-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover); --pf-v6-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked); --pf-v6-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked); --pf-v6-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked); --pf-v6-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default); --pf-v6-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default); --pf-v6-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default); --pf-v6-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover); --pf-v6-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover); --pf-v6-c-button--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover); --pf-v6-c-button--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked); --pf-v6-c-button--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked); --pf-v6-c-button--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked); --pf-v6-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default); --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default); --pf-v6-c-button--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default); --pf-v6-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover); --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover); --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover); --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked); --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked); --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked); --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious); --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious); --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious); --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious); --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default); --pf-v6-c-button--m-display-lg--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover); --pf-v6-c-button--m-display-lg--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover); --pf-v6-c-button--m-display-lg--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover); --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationColor: var(--pf-t--global--border--color--control--default); --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover); --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover); --pf-v6-c-button--m-display-lg--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover); --pf-v6-c-button--m-display-lg--m-primary--Color: var(--pf-t--global--text--color--on-brand--accent--default); --pf-v6-c-button--m-display-lg--m-primary--BackgroundColor: var(--pf-t--global--color--brand--accent--default); --pf-v6-c-button--m-display-lg--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--default); --pf-v6-c-button--m-display-lg--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--accent--hover); --pf-v6-c-button--m-display-lg--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--accent--hover); --pf-v6-c-button--m-display-lg--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--hover); --pf-v6-c-button--m-display-lg--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--accent--clicked); --pf-v6-c-button--m-display-lg--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--accent--clicked); --pf-v6-c-button--m-display-lg--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--clicked); --pf-v6-c-button--m-display-lg--m-primary--hover--TextDecorationColor: currentcolor; --pf-v6-c-button--m-display-lg--m-primary--m-clicked--TextDecorationColor: currentcolor; --pf-v6-c-button--m-display-lg--m-secondary--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-display-lg--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--accent--default); --pf-v6-c-button--m-display-lg--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--accent--default); --pf-v6-c-button--m-display-lg--m-secondary--hover--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-display-lg--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--accent--hover); --pf-v6-c-button--m-display-lg--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--accent--hover); --pf-v6-c-button--m-display-lg--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-display-lg--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--accent--clicked); --pf-v6-c-button--m-display-lg--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--accent--clicked); --pf-v6-c-button--m-display-lg--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-button--m-display-lg--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact); --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact); --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact); --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact); --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-button--disabled--TextDecorationColor: currentcolor; --pf-v6-c-button--disabled--BorderColor: transparent; --pf-v6-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled); --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button__icon--MarginInlineStart: 0; --pf-v6-c-button__icon--MarginInlineEnd: 0; --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0; --pf-v6-c-button__icon--m-end--MarginInlineStart: 0; --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl); --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-button__icon--TransitionDelay: 0s; --pf-v6-c-button__icon--TransitionTimingFunction: auto; --pf-v6-c-button__icon--TransitionDuration: 0s; --pf-v6-c-button__icon--TransitionProperty: none; --pf-v6-c-button__icon--Rotate: 0deg; --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto; --pf-v6-c-button--hover__icon--TransitionDuration: 0s; --pf-v6-c-button--hover__icon--TransitionProperty: none; --pf-v6-c-button--hover__icon--Rotate: 0deg; --pf-v6-c-button__icon--ScaleX: 1; --pf-v6-c-button__icon--ScaleY: 1; --pf-v6-c-button--hover__icon--ScaleX: 1; --pf-v6-c-button--hover__icon--ScaleY: 1; --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default); --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover); --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long); --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-button__icon--favorite--Opacity: 1; --pf-v6-c-button__icon--favorited--Opacity: 0; --pf-v6-c-button--m-favorited__icon--favorite--Opacity: 0; --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1; --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); --pf-v6-c-button__progress--Opacity: 0; --pf-v6-c-button__progress--TranslateY: -50%; --pf-v6-c-button__progress--TranslateX: 0; --pf-v6-c-button__progress--InsetBlockStart: 50%; --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color); --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2); --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2); --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width)); --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%; --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%; --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long); --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long); --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg; --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--alt); --pf-v6-c-button--m-block--Display: flex; --pf-v6-c-button--m-block--Width: 100%; --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md); --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1"); --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5"); --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5"); --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9"); --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base); --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base); --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base); --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base); --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1"); --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3"); --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9"); --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1; --pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: 1; --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill); } .pf-v6-c-button { position: relative; display: var(--pf-v6-c-button--Display); gap: var(--pf-v6-c-button--Gap); align-items: var(--pf-v6-c-button--AlignItems); justify-content: var(--pf-v6-c-button--JustifyContent); min-width: var(--pf-v6-c-button--MinWidth, revert); padding-block-start: var(--pf-v6-c-button--PaddingBlockStart); padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-button--PaddingInlineEnd); font-size: var(--pf-v6-c-button--FontSize, inherit); font-weight: var(--pf-v6-c-button--FontWeight, inherit); line-height: var(--pf-v6-c-button--LineHeight, inherit); color: var(--pf-v6-c-button--Color); text-align: center; white-space: nowrap; text-decoration-line: var(--pf-v6-c-button--TextDecorationLine); text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle); text-decoration-color: var(--pf-v6-c-button--TextDecorationColor); cursor: pointer; -webkit-user-select: none; user-select: none; background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%; border: 0; border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius)); border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius)); border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius)); border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius)); scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY); transition-delay: var(--pf-v6-c-button--TransitionDelay); transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction); transition-duration: var(--pf-v6-c-button--TransitionDuration); transition-property: var(--pf-v6-c-button--TransitionProperty); } .pf-v6-c-button::after { position: absolute; inset: var(--pf-v6-c-button--border--offset); pointer-events: none; content: ""; border: var(--pf-v6-c-button--BorderWidth) solid; border-color: var(--pf-v6-c-button--BorderColor); border-radius: inherit; transition: inherit; } .pf-v6-c-button.pf-m-primary { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-primary--BackgroundColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-primary__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-primary--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-primary--hover--BackgroundColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-primary--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-primary--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-primary--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread { --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor); } .pf-v6-c-button.pf-m-secondary { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-secondary--BorderColor); --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-secondary--TransitionDuration); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-secondary__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-secondary--hover--Color); --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-secondary--hover--BorderColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-secondary--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-clicked--Color); --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-clicked--BorderColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-clicked__icon--Color); --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-secondary--m-danger--Color); --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger__icon--Color); --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover--Color); --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover__icon--Color); --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--Color); --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-secondary.pf-m-danger { --pf-v6-c-button--m-secondary--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--BorderColor); --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--hover--BorderColor); --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor); --pf-v6-c-button--m-danger--BackgroundColor: transparent; --pf-v6-c-button--m-danger--hover--BackgroundColor: transparent; --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: transparent; } .pf-v6-c-button.pf-m-tertiary { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-tertiary--Color); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-tertiary--BorderColor); --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-tertiary--TransitionDuration); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-tertiary__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-tertiary--hover--Color); --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-tertiary--hover--BorderColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-tertiary--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-tertiary--m-clicked--Color); --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-tertiary--m-clicked--BorderColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-tertiary--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-link { --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--PaddingInlineEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--PaddingInlineStart); --pf-v6-c-button--Color: var(--pf-v6-c-button--m-link--Color); --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-link--BorderWidth); --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-link--hover--BorderColor); --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-link--hover--BorderWidth); --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-link--m-clicked--BorderColor); --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-link--m-clicked--BorderWidth); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-link--BorderColor); --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-link__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-link--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-link--hover--BackgroundColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-link--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color); --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd); --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart); } span.pf-v6-c-button.pf-m-link.pf-m-inline { --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display); --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd); --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart); } .pf-v6-c-button.pf-m-link.pf-m-inline { --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display); --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent); --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize); --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight); --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight); --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockStart); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd); --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart); --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration); --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction); --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty); --pf-v6-c-button--BackgroundColor: transparent; --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart); --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine); --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle); --pf-v6-c-button--hover--BackgroundColor: transparent; --pf-v6-c-button--m-clicked--BackgroundColor: transparent; --pf-v6-c-button--disabled--BackgroundColor: transparent; --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color); --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color); --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color); --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color); --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor); --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine); --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle); --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor); --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine); --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle); --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor); --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset); --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color); --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color); --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked--Color); --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color); --pf-v6-c-button--BorderWidth: 0; --pf-v6-c-button--hover--BorderWidth: 0; --pf-v6-c-button--m-clicked--BorderWidth: 0; text-align: start; white-space: normal; text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset); outline-offset: 0.125rem; background: transparent; } .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus { --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset); } .pf-v6-c-button.pf-m-link.pf-m-inline:active, .pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-clicked { --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset); } .pf-v6-c-button.pf-m-link.pf-m-danger { --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color); --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor); --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-link--m-danger__icon--Color); --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-link--m-danger--hover--Color); --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--hover--BackgroundColor); --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-link--m-danger--hover__icon--Color); --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked--Color); --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor); --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-link.pf-m-display-lg { --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-display-lg--FontSize); } .pf-v6-c-button.pf-m-warning { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-warning--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-warning--BackgroundColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-warning__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-warning--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-warning--hover--BackgroundColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-warning--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-warning--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-warning--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-warning--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-danger { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-danger--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-danger--BackgroundColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-danger__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-danger--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-danger--hover--BackgroundColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-danger--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-danger--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-danger--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-danger--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-control { --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-control--BorderRadius); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-control--PaddingInlineStart); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-control--PaddingInlineEnd); --pf-v6-c-button--Color: var(--pf-v6-c-button--m-control--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-control--BackgroundColor); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-control--BorderColor); --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-control--BorderWidth); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-control__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-control--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-control--hover--BackgroundColor); --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-control--hover--BorderColor); --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-control--hover--BorderWidth); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-control--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-control--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-control--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor); --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color); --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd); --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart); } .pf-v6-c-button.pf-m-plain { --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth); --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor); --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-plain--hover--BorderWidth); --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-plain--m-clicked--BorderColor); --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-plain--m-clicked--BorderWidth); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-plain--BorderColor); --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius); --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart); --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor); --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color); --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color); --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor); --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd); --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart); --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd); --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart); --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor); --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor); --pf-v6-c-button--m-read--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor); } .pf-v6-c-button.pf-m-plain.pf-m-no-padding { --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor); --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart); --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart); --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd); --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart); --pf-v6-c-button--border--offset: var(--pf-v6-c-button--m-plain--m-no-padding--border--offset); min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth); background: var(--pf-v6-c-button--BackgroundColor); } .pf-v6-c-button.pf-m-stateful { --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd); --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd); --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart); } .pf-v6-c-button.pf-m-read { --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor); --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor); } .pf-v6-c-button.pf-m-unread { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-attention { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-block { --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display); width: var(--pf-v6-c-button--m-block--Width); } .pf-v6-c-button.pf-m-small { --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-small--PaddingInlineEnd); --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-small--PaddingBlockEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-small--PaddingInlineStart); } .pf-v6-c-button.pf-m-display-lg { --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-display-lg--PaddingBlockStart); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-display-lg--PaddingInlineEnd); --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart); --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize); --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationColor); --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationLine); --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationStyle); --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-display-lg--hover--TextUnderlineOffset); --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationColor); --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationLine); --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationStyle); --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-display-lg--m-clicked--TextUnderlineOffset); --pf-v6-c-button--m-primary--Color: var(--pf-v6-c-button--m-display-lg--m-primary--Color); --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--BackgroundColor); --pf-v6-c-button--m-primary__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary__icon--Color); --pf-v6-c-button--m-primary--hover--Color: var(--pf-v6-c-button--m-display-lg--m-primary--hover--Color); --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--hover--BackgroundColor); --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary--hover__icon--Color); --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--Color); --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--BackgroundColor); --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked__icon--Color); --pf-v6-c-button--m-secondary--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--Color); --pf-v6-c-button--m-secondary--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--BorderColor); --pf-v6-c-button--m-secondary__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary__icon--Color); --pf-v6-c-button--m-secondary--hover--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--hover--Color); --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--hover--BorderColor); --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--hover__icon--Color); --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked--Color); --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked--BorderColor); --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked__icon--Color); --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-v6-c-button--m-display-lg--m-tertiary--hover--BorderColor); --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-v6-c-button--m-display-lg--m-tertiary--m-clicked--BorderColor); } .pf-v6-c-button.pf-m-display-lg.pf-m-primary { --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-primary--hover--TextDecorationColor); --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--TextDecorationColor); } .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon { display: grid; transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction); transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration); transition-property: color; } .pf-v6-c-button.pf-m-favorited { --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color); --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color); --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color); --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity); --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity); } .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon { animation-name: pf-v6-c-button-icon-favorited; animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration); animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction); } .pf-v6-c-button.pf-m-settings { --pf-v6-c-button__icon--TransitionProperty: rotate; --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration); --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction); --pf-v6-c-button--hover__icon--TransitionProperty: rotate; --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration); --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction); --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate); } .pf-v6-c-button.pf-m-hamburger { --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration); --pf-v6-c-button__icon--TransitionDuration: 0s; --pf-v6-c-button__icon--TransitionProperty: scale; --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration); --pf-v6-c-button--hover__icon--TransitionDuration: 0s; --pf-v6-c-button--hover__icon--TransitionProperty: scale; } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-button.pf-m-hamburger { --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: 1; --pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: -1; } .pf-v6-c-button.pf-m-hamburger.pf-m-expand { --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path); --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path); --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path); --pf-v6-c-button__icon--TransitionDelay: 0s; --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX); --pf-v6-c-button--hover__icon--TransitionDelay: 0s; --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX); } .pf-v6-c-button.pf-m-hamburger.pf-m-collapse { --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path); --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path); --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path); --pf-v6-c-button__icon--TransitionDelay: 0s; --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX); --pf-v6-c-button--hover__icon--TransitionDelay: 0s; --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX); } .pf-v6-c-button.pf-m-circle { --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius); padding-inline: 0; } .pf-v6-c-button:hover, .pf-v6-c-button:focus { --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor); --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth); --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX); --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY); --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color); --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction); --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration); --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty); --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate); --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX); --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY); text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine); text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle); text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor); text-underline-offset: var(--pf-v6-c-button--hover--TextUnderlineOffset); outline-offset: var(--pf-t--global--focus-ring--position--offset); } .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor); --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color); text-decoration-line: var(--pf-v6-c-button--m-clicked--TextDecorationLine); text-decoration-style: var(--pf-v6-c-button--m-clicked--TextDecorationStyle); text-decoration-color: var(--pf-v6-c-button--m-clicked--TextDecorationColor); text-underline-offset: var(--pf-v6-c-button--m-clicked--TextUnderlineOffset); } .pf-v6-c-button:active { background-size: 100% 100%; transition-duration: 0s; } .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled { pointer-events: none; } .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled { color: var(--pf-v6-c-button--disabled--Color); text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor); background: var(--pf-v6-c-button--disabled--BackgroundColor); } .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after { border-color: transparent; } .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon { color: var(--pf-v6-c-button--disabled__icon--Color); } .pf-v6-c-button.pf-m-aria-disabled { --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine); --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle); cursor: default; } .pf-v6-c-button.pf-m-progress { --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart); } .pf-v6-c-button.pf-m-in-progress { --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart); } .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) { --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart); } .pf-v6-c-button.pf-m-in-progress.pf-m-plain { --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart); --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX); } .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) { opacity: 0; } .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon { animation-name: pf-v6-c-button-icon-notify; animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify); animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify); } .pf-v6-c-button.pf-m-docked { justify-content: flex-start; width: 100%; } .pf-v6-c-button.pf-m-docked .pf-v6-c-button__icon { min-width: 1lh; } @media (min-width: 62rem) { .pf-v6-c-button.pf-m-docked { justify-content: center; } .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text { display: none; } } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked, .pf-v6-c-button.pf-m-text-expanded { justify-content: flex-start; width: 100%; } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text { display: revert; } .pf-v6-c-button__icon { margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart); margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd); color: var(--pf-v6-c-button__icon--Color); rotate: var(--pf-v6-c-button__icon--Rotate); scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY); transition-delay: var(--pf-v6-c-button__icon--TransitionDelay); transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction); transition-duration: var(--pf-v6-c-button__icon--TransitionDuration); transition-property: var(--pf-v6-c-button__icon--TransitionProperty); } .pf-v6-c-button__icon.pf-m-start { --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd); } .pf-v6-c-button__icon.pf-m-end { --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart); } .pf-v6-c-button__icon-favorite, .pf-v6-c-button__icon-favorited { grid-area: 1/1/1/1; transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration); transition-property: opacity; } .pf-v6-c-button__icon-favorite { opacity: var(--pf-v6-c-button__icon--favorite--Opacity); } .pf-v6-c-button__icon-favorited { opacity: var(--pf-v6-c-button__icon--favorited--Opacity); } .pf-v6-c-button__progress { position: absolute; inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart); inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart); line-height: 1; color: var(--pf-v6-c-button__progress--Color); transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY)); } .pf-v6-c-button__progress .pf-v6-c-spinner { --pf-v6-c-spinner--Color: currentcolor; } .pf-v6-c-button__text { text-decoration: inherit; } .pf-v6-c-button__count { display: inline-flex; align-items: center; } .pf-v6-c-button--hamburger-icon path { fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction); } .pf-v6-c-button--hamburger-icon--top { d: var(--pf-v6-c-button--hamburger-icon--top--path); } .pf-v6-c-button--hamburger-icon--middle { d: var(--pf-v6-c-button--hamburger-icon--middle--path); } .pf-v6-c-button--hamburger-icon--arrow { d: var(--pf-v6-c-button--hamburger-icon--arrow--path); } .pf-v6-c-button--hamburger-icon--bottom { d: var(--pf-v6-c-button--hamburger-icon--bottom--path); } @keyframes pf-v6-c-button-icon-notify { 33% { transform: rotate(30deg); } 66% { transform: rotate(-60deg); } } @keyframes pf-v6-c-button-icon-favorited { 50% { scale: 1.5; } } .pf-v6-c-menu-toggle { --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-menu-toggle--MinWidth: calc(1lh + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd)); --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--control--default); --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default); --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color; --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover); --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked); --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled); --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled); --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled); --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight)); --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s; --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s; --pf-v6-c-menu-toggle__icon--TransitionProperty: none; --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s; --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s; --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none; --pf-v6-c-menu-toggle__icon--Rotate: 0deg; --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg; --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight)); --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default); --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default); --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default); --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default); --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent; --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover); --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover); --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent; --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked); --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked); --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent; --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default); --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover); --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked); --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact); --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact); --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default); --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default); --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent; --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default); --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default); --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default); --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover); --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover); --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked); --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent; --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked); --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked); --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover); --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked); --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact); --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact); --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious); --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious); --pf-v6-c-menu-toggle--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element); --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default); --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default); --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default); --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled); --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover); --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt); --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked); --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default); --pf-v6-c-menu-toggle__button--BackgroundColor: transparent; --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-menu-toggle__button--AlignSelf: baseline; --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain); --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain); --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd)); --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default); --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default); --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default); --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled); --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled); --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent; --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact); --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact); --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch; --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact); --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact); --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default); --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default); --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default); --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default); --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default); --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default); --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder); --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm); --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long); --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long); --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg; } .pf-v6-c-menu-toggle { position: relative; display: inline-flex; gap: var(--pf-v6-c-menu-toggle--Gap); align-items: center; justify-content: center; min-width: var(--pf-v6-c-menu-toggle--MinWidth, revert); max-width: 100%; padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd); font-size: var(--pf-v6-c-menu-toggle--FontSize); line-height: var(--pf-v6-c-menu-toggle--LineHeight); color: var(--pf-v6-c-menu-toggle--Color); cursor: pointer; background-color: var(--pf-v6-c-menu-toggle--BackgroundColor); border: 0; transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction); transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration); transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty); } .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before { border-radius: var(--pf-v6-c-menu-toggle--BorderRadius); } .pf-v6-c-menu-toggle::before { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; inset-inline-end: 0; z-index: var(--pf-v6-c-menu-toggle--border--ZIndex); pointer-events: none; content: ""; border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor); transition: inherit; } .pf-v6-c-menu-toggle.pf-m-primary { --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart); --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd); --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor); --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius); --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor); --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color); --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor); --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor); --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color); --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor); --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor); --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color); --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color); --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color); --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart); --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd); } .pf-v6-c-menu-toggle.pf-m-secondary { --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart); --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd); --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor); --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor); --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius); --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color); --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth); --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor); --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color); --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor); --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth); --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color); --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color); --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color); --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart); --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd); } .pf-v6-c-menu-toggle.pf-m-full-height { --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd); --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart); --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth); align-items: center; height: 100%; } .pf-v6-c-menu-toggle.pf-m-full-width { width: 100%; } .pf-v6-c-menu-toggle.pf-m-form { --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius); } .pf-v6-c-menu-toggle.pf-m-plain { --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart); --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd); --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor); --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor); --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth); --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor); --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor); --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor); --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color); --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color); --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color); --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor); --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart); --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd); } .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle { --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius); } .pf-v6-c-menu-toggle.pf-m-plain::before { --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth); --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor); } .pf-v6-c-menu-toggle:is(:hover, :focus) { --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor); --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth); --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth); --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor); --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color); --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay); --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration); --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty); --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate); } .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) { --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor); --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth); --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth); --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor); --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color); } .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before { border: 0; } .pf-v6-c-menu-toggle.pf-m-small { --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart); --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd); --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart); --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd); --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart); --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd); --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset); --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset); } .pf-v6-c-menu-toggle.pf-m-success { --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor); --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color); } .pf-v6-c-menu-toggle.pf-m-warning { --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor); --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color); } .pf-v6-c-menu-toggle.pf-m-danger { --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor); --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color); } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-menu-toggle.pf-m-danger { transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0)); animation-name: pf-v6-c-menu-toggle-m-danger-motion; animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform); animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform); animation-fill-mode: both; } } .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon { animation-name: pf-v6-c-menu-toggle-status-icon-fade-in; animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity); animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity); } @keyframes pf-v6-c-menu-toggle-status-icon-fade-in { from { opacity: 0; } to { opacity: 1; } } .pf-v6-c-menu-toggle.pf-m-settings { --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate; --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration); --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction); --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate; --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration); --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction); --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate); } .pf-v6-c-menu-toggle.pf-m-placeholder { --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color); } .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) { --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color); --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color); --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color); --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor); } .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled), .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button { pointer-events: none; } .pf-v6-c-menu-toggle.pf-m-docked { justify-content: flex-start; width: 100%; } .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon { min-width: 1lh; } @media (min-width: 62rem) { .pf-v6-c-menu-toggle.pf-m-docked { justify-content: center; width: auto; } .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text, .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls { display: none; } } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle.pf-m-text-expanded { justify-content: flex-start; width: 100%; } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text, :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls { display: revert; } @property --pf-v6-c-menu-toggle--m-danger--TranslateX { syntax: ""; inherits: false; initial-value: 0; } @media (prefers-reduced-motion: no-preference) { @keyframes pf-v6-c-menu-toggle-m-danger-motion { 33% { --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px; } 66% { --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px; } } } .pf-v6-c-menu-toggle.pf-m-split-button { --pf-v6-c-menu-toggle--Gap: 0; --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor); padding: 0; } .pf-v6-c-menu-toggle.pf-m-split-button > * { position: relative; padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd); } .pf-v6-c-menu-toggle.pf-m-split-button > :first-child { border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius); border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius); } .pf-v6-c-menu-toggle.pf-m-split-button > :last-child { border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius); border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius); } .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check { --pf-v6-c-check__label--Color: currentcolor; --pf-v6-c-check__label--disabled--Color: currentcolor; align-items: center; align-self: stretch; } .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input { --pf-v6-c-check__input--TranslateY: 0; align-self: center; } .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) { border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary { --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check { background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus), .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) { --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded { --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary { --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child { padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child { padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset); } .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) { --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor); } .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button, .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check { color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color); background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor); } .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before { content: none; } .pf-v6-c-menu-toggle.pf-m-typeahead { --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf); --pf-v6-c-menu-toggle--Gap: 0; align-items: stretch; padding: 0; } .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button { --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0; } .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls { --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0; display: flex; align-items: stretch; } .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group { --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0; flex: 1; } .pf-v6-c-menu-toggle__button { gap: var(--pf-v6-c-menu-toggle__button--Gap); align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf); min-width: var(--pf-v6-c-menu-toggle__button--MinWidth); padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd); color: inherit; background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor); border: 0; } .pf-v6-c-menu-toggle__button.pf-m-text { display: inline-flex; align-items: baseline; } .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) { padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd); } .pf-v6-c-menu-toggle__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pf-v6-c-menu-toggle__count { display: flex; flex-wrap: nowrap; } .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar, .pf-v6-c-menu-toggle__icon.pf-m-avatar img, .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon { margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1); margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1); } .pf-v6-c-menu-toggle__icon { flex-shrink: 0; rotate: var(--pf-v6-c-menu-toggle__icon--Rotate); transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay); transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration); transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty); } .pf-v6-c-menu-toggle__icon :where(picture, img) { vertical-align: middle; } .pf-v6-c-menu-toggle__controls { display: flex; gap: var(--pf-v6-c-menu-toggle__controls--Gap); align-items: center; justify-content: center; margin-inline-start: auto; } .pf-v6-c-menu-toggle__toggle-icon { min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight); color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit); } .pf-v6-c-menu-toggle__status-icon { color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit); } .pf-v6-c-divider { --pf-v6-c-divider--Display: flex; --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default); --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default); --pf-v6-c-divider--before--FlexBasis: 100%; } .pf-v6-c-divider { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display); --pf-v6-hidden-visible--hidden--Display: none; --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); display: var(--pf-v6-hidden-visible--Display); } .pf-v6-c-divider.pf-m-hidden { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } @media screen and (min-width: 36rem) { .pf-v6-c-divider.pf-m-hidden-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-divider.pf-m-visible-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 48rem) { .pf-v6-c-divider.pf-m-hidden-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-divider.pf-m-visible-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 62rem) { .pf-v6-c-divider.pf-m-hidden-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-divider.pf-m-visible-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 75rem) { .pf-v6-c-divider.pf-m-hidden-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-divider.pf-m-visible-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 90.625rem) { .pf-v6-c-divider.pf-m-hidden-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-divider.pf-m-visible-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } .pf-v6-c-divider { flex-shrink: 0; align-items: stretch; align-self: stretch; justify-content: center; border: 0; } .pf-v6-c-divider::before { flex-basis: var(--pf-v6-c-divider--before--FlexBasis); content: ""; background-color: var(--pf-v6-c-divider--Color); border-block-start: var(--pf-v6-c-divider--Size) solid transparent; border-inline-start: var(--pf-v6-c-divider--Size) solid transparent; } .pf-v6-c-divider.pf-m-horizontal { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); } .pf-v6-c-divider.pf-m-vertical { flex-direction: column; width: var(--pf-v6-c-divider--Size); height: inherit; } .pf-v6-c-divider.pf-m-inset-none { --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2); } .pf-v6-c-divider.pf-m-inset-xs { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2); } .pf-v6-c-divider.pf-m-inset-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2); } .pf-v6-c-divider.pf-m-inset-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2); } .pf-v6-c-divider.pf-m-inset-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2); } .pf-v6-c-divider.pf-m-inset-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2); } .pf-v6-c-divider.pf-m-inset-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2); } .pf-v6-c-divider.pf-m-inset-3xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2); } @media (min-width: 36rem) { .pf-v6-c-divider.pf-m-horizontal-on-sm { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); } } @media (min-width: 36rem) { .pf-v6-c-divider.pf-m-vertical-on-sm { flex-direction: column; width: var(--pf-v6-c-divider--Size); height: inherit; } } @media (min-width: 36rem) { .pf-v6-c-divider.pf-m-inset-none-on-sm { --pf-v6-c-divider--before--FlexBasis: 100%; } .pf-v6-c-divider.pf-m-inset-xs-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2); } .pf-v6-c-divider.pf-m-inset-sm-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2); } .pf-v6-c-divider.pf-m-inset-md-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2); } .pf-v6-c-divider.pf-m-inset-lg-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2); } .pf-v6-c-divider.pf-m-inset-xl-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2); } .pf-v6-c-divider.pf-m-inset-2xl-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2); } .pf-v6-c-divider.pf-m-inset-3xl-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2); } } @media (min-width: 48rem) { .pf-v6-c-divider.pf-m-horizontal-on-md { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); } } @media (min-width: 48rem) { .pf-v6-c-divider.pf-m-vertical-on-md { flex-direction: column; width: var(--pf-v6-c-divider--Size); height: inherit; } } @media (min-width: 48rem) { .pf-v6-c-divider.pf-m-inset-none-on-md { --pf-v6-c-divider--before--FlexBasis: 100%; } .pf-v6-c-divider.pf-m-inset-xs-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2); } .pf-v6-c-divider.pf-m-inset-sm-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2); } .pf-v6-c-divider.pf-m-inset-md-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2); } .pf-v6-c-divider.pf-m-inset-lg-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2); } .pf-v6-c-divider.pf-m-inset-xl-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2); } .pf-v6-c-divider.pf-m-inset-2xl-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2); } .pf-v6-c-divider.pf-m-inset-3xl-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2); } } @media (min-width: 62rem) { .pf-v6-c-divider.pf-m-horizontal-on-lg { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); } } @media (min-width: 62rem) { .pf-v6-c-divider.pf-m-vertical-on-lg { flex-direction: column; width: var(--pf-v6-c-divider--Size); height: inherit; } } @media (min-width: 62rem) { .pf-v6-c-divider.pf-m-inset-none-on-lg { --pf-v6-c-divider--before--FlexBasis: 100%; } .pf-v6-c-divider.pf-m-inset-xs-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2); } .pf-v6-c-divider.pf-m-inset-sm-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2); } .pf-v6-c-divider.pf-m-inset-md-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2); } .pf-v6-c-divider.pf-m-inset-lg-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2); } .pf-v6-c-divider.pf-m-inset-xl-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2); } .pf-v6-c-divider.pf-m-inset-2xl-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2); } .pf-v6-c-divider.pf-m-inset-3xl-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2); } } @media (min-width: 75rem) { .pf-v6-c-divider.pf-m-horizontal-on-xl { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); } } @media (min-width: 75rem) { .pf-v6-c-divider.pf-m-vertical-on-xl { flex-direction: column; width: var(--pf-v6-c-divider--Size); height: inherit; } } @media (min-width: 75rem) { .pf-v6-c-divider.pf-m-inset-none-on-xl { --pf-v6-c-divider--before--FlexBasis: 100%; } .pf-v6-c-divider.pf-m-inset-xs-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2); } .pf-v6-c-divider.pf-m-inset-sm-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2); } .pf-v6-c-divider.pf-m-inset-md-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2); } .pf-v6-c-divider.pf-m-inset-lg-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2); } .pf-v6-c-divider.pf-m-inset-xl-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2); } .pf-v6-c-divider.pf-m-inset-2xl-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2); } .pf-v6-c-divider.pf-m-inset-3xl-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2); } } @media (min-width: 90.625rem) { .pf-v6-c-divider.pf-m-horizontal-on-2xl { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); } } @media (min-width: 90.625rem) { .pf-v6-c-divider.pf-m-vertical-on-2xl { flex-direction: column; width: var(--pf-v6-c-divider--Size); height: inherit; } } @media (min-width: 90.625rem) { .pf-v6-c-divider.pf-m-inset-none-on-2xl { --pf-v6-c-divider--before--FlexBasis: 100%; } .pf-v6-c-divider.pf-m-inset-xs-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2); } .pf-v6-c-divider.pf-m-inset-sm-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2); } .pf-v6-c-divider.pf-m-inset-md-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2); } .pf-v6-c-divider.pf-m-inset-lg-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2); } .pf-v6-c-divider.pf-m-inset-xl-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2); } .pf-v6-c-divider.pf-m-inset-2xl-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2); } .pf-v6-c-divider.pf-m-inset-3xl-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2); } } .pf-v6-c-check { --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default); --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight)); --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs); --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default); --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%); } .pf-v6-c-check { display: grid; grid-template-columns: auto 1fr; gap: var(--pf-v6-c-check--GridGap); accent-color: var(--pf-v6-c-check--AccentColor); } .pf-v6-c-check.pf-m-standalone { display: inline-grid; grid-template-columns: auto; min-height: var(--pf-v6-c-check--m-standalone--MinHeight); } .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input { align-self: center; transform: none; } .pf-v6-c-check__input { align-self: start; font-size: var(--pf-v6-c-check__label--FontSize); line-height: var(--pf-v6-c-check__label--LineHeight); transform: translateY(var(--pf-v6-c-check__input--TranslateY)); } .pf-v6-c-check__label { font-size: var(--pf-v6-c-check__label--FontSize); font-weight: var(--pf-v6-c-check__label--FontWeight); line-height: var(--pf-v6-c-check__label--LineHeight); color: var(--pf-v6-c-check__label--Color); } .pf-v6-c-check__description { grid-column: 2; font-size: var(--pf-v6-c-check__description--FontSize); color: var(--pf-v6-c-check__description--Color); } .pf-v6-c-check__body { grid-column: 2; } .pf-v6-c-check__label, .pf-v6-c-check__input { justify-self: start; } label.pf-v6-c-check, .pf-v6-c-check__label, .pf-v6-c-check__input { cursor: pointer; } .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled, .pf-v6-c-check__input:disabled, .pf-v6-c-check__input.pf-m-disabled { --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color); cursor: not-allowed; } .pf-v6-c-check__label-required { margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart); font-size: var(--pf-v6-c-check__label-required--FontSize); color: var(--pf-v6-c-check__label-required--Color); } .pf-v6-c-form-control { --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-form-control--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-form-control--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-form-control--Resize: none; --pf-v6-c-form-control--OutlineOffset: -6px; --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element); --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-form-control--before--BorderStyle: solid; --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--control--default); --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius); --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-form-control--after--BorderStyle: solid; --pf-v6-c-form-control--after--BorderColor: transparent; --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius); --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-form-control--Width: 100%; --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-form-control--PaddingInlineEnd--base: var(--pf-v6-c-form-control--inset--base); --pf-v6-c-form-control--PaddingInlineStart--base: var(--pf-v6-c-form-control--inset--base); --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base); --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base); --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base); --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base); --pf-v6-c-form-control__utilities--input--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd); --pf-v6-c-form-control__utilities--select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd); --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd: var(--pf-v6-c-form-control__textarea--PaddingInlineEnd); --pf-v6-c-form-control__input--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base); --pf-v6-c-form-control__input--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base); --pf-v6-c-form-control__input--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base); --pf-v6-c-form-control__input--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base); --pf-v6-c-form-control__select--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base); --pf-v6-c-form-control__select--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base); --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base); --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base); --pf-v6-c-form-control__textarea--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base); --pf-v6-c-form-control__textarea--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base); --pf-v6-c-form-control__textarea--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base); --pf-v6-c-form-control__textarea--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base); --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover); --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover); --pf-v6-c-form-control--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover); --pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover); --pf-v6-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked); --pf-v6-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder); --pf-v6-c-form-control--m-placeholder--child--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-form-control--m-disabled--after--BorderColor: transparent; --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only); --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only); --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert; --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent; --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent; --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0; --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0; --pf-v6-c-form-control--icon--width: var(--pf-v6-c-form-control--FontSize); --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default); --pf-v6-c-form-control--m-success--PaddingInlineEnd: initial; --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: initial; --pf-v6-c-form-control__input--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd)); --pf-v6-c-form-control__select--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd)); --pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd)); --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default); --pf-v6-c-form-control--m-warning--PaddingInlineEnd: initial; --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: initial; --pf-v6-c-form-control__input--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd)); --pf-v6-c-form-control__select--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd)); --pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd)); --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default); --pf-v6-c-form-control--m-error--PaddingInlineEnd: initial; --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: initial; --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize); --pf-v6-c-form-control__input--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd)); --pf-v6-c-form-control__select--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd)); --pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd)); --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd)); --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize); --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2); --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--icon--width) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd)); --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width); --pf-v6-c-form-control--textarea--Height: auto; --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset)); --pf-v6-c-form-control--textarea--PaddingBlockEnd--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset)); --pf-v6-c-form-control--textarea--PaddingInlineEnd--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset)); --pf-v6-c-form-control--textarea--PaddingInlineStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset)); --pf-v6-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-form-control__icon--FontSize: var(--pf-t--global--icon--size--font--body--default); --pf-v6-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default); --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default); --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default); --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal); --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart); --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base); --pf-v6-c-form-control__utilities--textarea--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset)); --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: 0; --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: 0; --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-form-control__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default); --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled); } .pf-v6-c-form-control { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: var(--pf-v6-c-form-control--ColumnGap); align-items: start; width: var(--pf-v6-c-form-control--Width); font-size: var(--pf-v6-c-form-control--FontSize); line-height: var(--pf-v6-c-form-control--LineHeight); resize: var(--pf-v6-c-form-control--Resize); background-color: var(--pf-v6-c-form-control--BackgroundColor); border-radius: var(--pf-v6-c-form-control--BorderRadius); } .pf-v6-c-form-control::before, .pf-v6-c-form-control::after { position: absolute; inset: 0; pointer-events: none; content: ""; } .pf-v6-c-form-control::before { border-color: var(--pf-v6-c-form-control--before--BorderColor); border-style: var(--pf-v6-c-form-control--before--BorderStyle); border-width: var(--pf-v6-c-form-control--before--BorderWidth); border-radius: var(--pf-v6-c-form-control--before--BorderRadius); } .pf-v6-c-form-control::after { border: var(--pf-v6-c-form-control--after--BorderWidth) var(--pf-v6-c-form-control--after--BorderStyle) var(--pf-v6-c-form-control--after--BorderColor); border-radius: var(--pf-v6-c-form-control--before--BorderRadius); } .pf-v6-c-form-control > :is(input, select, textarea) { grid-row: 1/2; grid-column: 1/-1; padding-block-start: var(--pf-v6-c-form-control--PaddingBlockStart); padding-block-end: var(--pf-v6-c-form-control--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd); color: var(--pf-v6-c-form-control--Color); appearance: none; outline-offset: var(--pf-v6-c-form-control--OutlineOffset); background-color: transparent; border: none; border-radius: var(--pf-v6-c-form-control--BorderRadius); } .pf-v6-c-form-control > ::placeholder { color: var(--pf-v6-c-form-control--m-placeholder--Color); } .pf-v6-c-form-control > :is(input, select) { text-overflow: ellipsis; } .pf-v6-c-form-control > select { background-color: var(--pf-v6-c-form-control--BackgroundColor); } .pf-v6-c-form-control > select * { color: var(--pf-v6-c-form-control--Color); } .pf-v6-c-form-control:has(input) { --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart); --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd); --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__input--PaddingInlineStart); --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd); --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd); } .pf-v6-c-form-control.pf-m-textarea { padding-block-start: var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset); padding-block-end: var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset); padding-inline-start: var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset); padding-inline-end: var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset); } .pf-v6-c-form-control.pf-m-textarea.pf-m-success, .pf-v6-c-form-control.pf-m-textarea.pf-m-warning, .pf-v6-c-form-control.pf-m-textarea.pf-m-error { --pf-v6-c-form-control--m-status--PaddingInlineEnd--offset: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--ColumnGap)); } .pf-v6-c-form-control.pf-m-textarea:has(textarea) { --pf-v6-c-form-control--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset)); --pf-v6-c-form-control--PaddingBlockEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset)); --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset)); --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0px)); --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd); } .pf-v6-c-form-control.pf-m-textarea > textarea { scrollbar-gutter: stable; outline-offset: 0; } .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities { padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart); } .pf-v6-c-form-control.pf-m-readonly { --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor); --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor); } .pf-v6-c-form-control.pf-m-readonly:hover { --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor); } .pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) { --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor); } .pf-v6-c-form-control.pf-m-readonly.pf-m-plain { --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor); --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor); --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base); --pf-v6-c-form-control--before--BorderStyle: none; --pf-v6-c-form-control--after--BorderStyle: none; --pf-v6-c-form-control--OutlineOffset: var(--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset); } .pf-v6-c-form-control.pf-m-expanded { --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-expanded--after--BorderColor); --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-expanded--after--BorderWidth); } .pf-v6-c-form-control.pf-m-disabled { --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-disabled--BackgroundColor); --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color); --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color); --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color); --pf-v6-c-form-control--before--BorderStyle: none; --pf-v6-c-form-control--after--BorderStyle: none; cursor: not-allowed; } .pf-v6-c-form-control.pf-m-error { --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor); --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor); --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color); --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth); } @media (prefers-reduced-motion: no-preference) { .pf-v6-c-form-control.pf-m-error { translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0); animation-name: pf-v6-global-danger-jiggle-motion; animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform); animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform); animation-fill-mode: both; } } .pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status { --pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default); animation-name: pf-v6-global-fade-in; animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity); animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity); } .pf-v6-c-form-control.pf-m-error > textarea { padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-error > input { padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-error--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-error > select { padding-inline-end: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-error--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-error.pf-m-icon > :is(input) { padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd); } .pf-v6-c-form-control.pf-m-success { --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor); --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor); --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color); --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth); } .pf-v6-c-form-control.pf-m-success > textarea { padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-success > input { padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-success--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-success > select { padding-inline-end: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-success--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-success.pf-m-icon > :is(input) { padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd); } .pf-v6-c-form-control.pf-m-warning { --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor); --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor); --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color); --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth); } .pf-v6-c-form-control.pf-m-warning > textarea { padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-warning > input { padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-warning > select { padding-inline-end: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-warning--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-warning.pf-m-icon > :is(input) { padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd); } .pf-v6-c-form-control:hover { --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor); --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth); } .pf-v6-c-form-control.pf-m-icon { --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd); } .pf-v6-c-form-control:has(select) { --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__select--PaddingBlockStart); --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__select--PaddingBlockEnd); --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart); --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize)); --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd); } .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities { padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd); } .pf-v6-c-form-control.pf-m-placeholder > select { --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color); } .pf-v6-c-form-control.pf-m-placeholder > select * { color: var(--pf-v6-c-form-control--m-placeholder--child--Color); } .pf-v6-c-form-control.pf-m-placeholder > select *:disabled { color: revert; } .pf-v6-c-form-control > textarea { width: 100%; height: 100%; vertical-align: bottom; resize: none; } .pf-v6-c-form-control.pf-m-resize-vertical { --pf-v6-c-form-control--Resize: vertical; overflow: auto; } .pf-v6-c-form-control.pf-m-resize-horizontal { --pf-v6-c-form-control--Resize: horizontal; overflow: auto; } .pf-v6-c-form-control.pf-m-resize-both { --pf-v6-c-form-control--Resize: both; overflow: auto; } .pf-v6-c-form-control__icon { font-size: var(--pf-v6-c-form-control__icon--FontSize); color: var(--pf-v6-c-form-control__icon--Color); } .pf-v6-c-form-control__icon.pf-m-status { --pf-v6-c-form-control__icon--Color: var(--pf-v6-c-form-control__icon--m-status--Color); } .pf-v6-c-form-control__toggle-icon { grid-row: 1/2; grid-column: 3; padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd); font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize); color: var(--pf-v6-c-form-control__toggle-icon--Color); pointer-events: none; } .pf-v6-c-form-control__utilities { display: flex; flex-wrap: nowrap; grid-row: 1/2; grid-column: 2; gap: var(--pf-v6-c-form-control__utilities--Gap); padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd); pointer-events: none; } .pf-v6-c-action-list { --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical); --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default); --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default); --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default); --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain); --pf-v6-c-action-list--m-vertical--m-icons--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain); } .pf-v6-c-action-list, .pf-v6-c-action-list__group { display: flex; align-items: start; } .pf-v6-c-action-list { row-gap: var(--pf-v6-c-action-list--RowGap); column-gap: var(--pf-v6-c-action-list--ColumnGap); } .pf-v6-c-action-list.pf-m-icons { --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap); --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-v6-c-action-list--m-vertical--m-icons--RowGap); column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap); } .pf-v6-c-action-list.pf-m-vertical, .pf-v6-c-action-list.pf-m-vertical .pf-v6-c-action-list__group { flex-direction: column; } .pf-v6-c-action-list.pf-m-vertical { row-gap: var(--pf-v6-c-action-list--m-vertical--RowGap); } .pf-v6-c-action-list__group { row-gap: var(--pf-v6-c-action-list__group--RowGap, var(--pf-v6-c-action-list--RowGap)); column-gap: var(--pf-v6-c-action-list__group--ColumnGap); } .pf-v6-c-action-list__group.pf-m-icons { column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap); } .pf-v6-c-popover { --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem); --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem); --pf-v6-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md); --pf-v6-c-popover--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-popover--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium); --pf-v6-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default); --pf-v6-c-popover--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default); --pf-v6-c-popover--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default); --pf-v6-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default); --pf-v6-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default); --pf-v6-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-popover__content--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-popover__content--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-popover__content--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-popover__content--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium); --pf-v6-c-popover__arrow--Width: 0.9375rem; --pf-v6-c-popover__arrow--Height: 0.9375rem; --pf-v6-c-popover__arrow--BoxShadow: var(--pf-t--global--box-shadow--md); --pf-v6-c-popover__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-popover__arrow--m-top--TranslateX: -50%; --pf-v6-c-popover__arrow--m-top--TranslateY: 50%; --pf-v6-c-popover__arrow--m-top--Rotate: 45deg; --pf-v6-c-popover__arrow--m-right--TranslateX: -50%; --pf-v6-c-popover__arrow--m-right--TranslateY: -50%; --pf-v6-c-popover__arrow--m-right--Rotate: 45deg; --pf-v6-c-popover__arrow--m-bottom--TranslateX: -50%; --pf-v6-c-popover__arrow--m-bottom--TranslateY: -50%; --pf-v6-c-popover__arrow--m-bottom--Rotate: 45deg; --pf-v6-c-popover__arrow--m-left--TranslateX: 50%; --pf-v6-c-popover__arrow--m-left--TranslateY: -50%; --pf-v6-c-popover__arrow--m-left--Rotate: 45deg; --pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart: var(--pf-t--global--border--radius--medium); --pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd: var(--pf-t--global--border--radius--medium); --pf-v6-c-popover__arrow--m-block-left--InsetInlineStart: var(--pf-t--global--border--radius--medium); --pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium); --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--default)); --pf-v6-c-popover__close--InsetInlineEnd: var(--pf-v6-c-popover__content--PaddingInlineEnd); --pf-v6-c-popover__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl); --pf-v6-c-popover__header--MarginBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-popover__title-text--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-popover__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--icon--size--font--body--default); --pf-v6-c-popover__footer--MarginBlockStart: var(--pf-t--global--spacer--md); } .pf-v6-c-popover { position: relative; min-width: var(--pf-v6-c-popover--MinWidth); max-width: var(--pf-v6-c-popover--MaxWidth); font-size: var(--pf-v6-c-popover--FontSize); border: var(--pf-v6-c-popover--BorderWidth) solid var(--pf-v6-c-popover--BorderColor); border-radius: var(--pf-v6-c-popover--BorderRadius); box-shadow: var(--pf-v6-c-popover--BoxShadow); } .pf-v6-c-popover.pf-m-no-padding { --pf-v6-c-popover__content--PaddingBlockStart: 0px; --pf-v6-c-popover__content--PaddingInlineEnd: 0px; --pf-v6-c-popover__content--PaddingBlockEnd: 0px; --pf-v6-c-popover__content--PaddingInlineStart: 0px; } .pf-v6-c-popover.pf-m-width-auto { --pf-v6-c-popover--MinWidth: auto; --pf-v6-c-popover--MaxWidth: none; } .pf-v6-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right) { --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover--m-top--InsetBlockEnd, 0); --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-top--InsetInlineStart, 50%); --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-top--TranslateX); --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY); --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-top--Rotate); } .pf-v6-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right) { --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-bottom--InsetBlockStart, 0); --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-bottom--InsetInlineStart, 50%); --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-bottom--TranslateX); --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-bottom--TranslateY); --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-bottom--Rotate); } .pf-v6-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom) { --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-left--InsetBlockStart, 50%); --pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover--m-left--InsetInlineEnd, 0); --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX); --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-left--TranslateY); --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-left--Rotate); } .pf-v6-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom) { --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-right--InsetBlockStart, 50%); --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-right--InsetInlineStart, 0); --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-right--TranslateX); --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-right--TranslateY); --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-right--Rotate); } .pf-v6-c-popover:is(.pf-m-left-top, .pf-m-right-top) { --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart); --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY); } .pf-v6-c-popover:is(.pf-m-left-bottom, .pf-m-right-bottom) { --pf-v6-c-popover__arrow--InsetBlockStart: auto; --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd); } .pf-v6-c-popover:is(.pf-m-top-left, .pf-m-bottom-left) { --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover__arrow--m-block-left--InsetInlineStart); --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX); } .pf-v6-c-popover:is(.pf-m-top-right, .pf-m-bottom-right) { --pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd); --pf-v6-c-popover__arrow--InsetInlineStart: auto; } .pf-v6-c-popover.pf-m-danger { --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-danger__title-icon--Color); } .pf-v6-c-popover.pf-m-warning { --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-warning__title-icon--Color); } .pf-v6-c-popover.pf-m-success { --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-success__title-icon--Color); } .pf-v6-c-popover.pf-m-custom { --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-custom__title-icon--Color); } .pf-v6-c-popover.pf-m-info { --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-info__title-icon--Color); } .pf-v6-c-popover__content { position: relative; padding-block-start: var(--pf-v6-c-popover__content--PaddingBlockStart); padding-block-end: var(--pf-v6-c-popover__content--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-popover__content--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-popover__content--PaddingInlineEnd); background-color: var(--pf-v6-c-popover__content--BackgroundColor); border-radius: var(--pf-v6-c-popover__content--BorderRadius); } .pf-v6-c-popover__close { position: absolute; inset-block-start: var(--pf-v6-c-popover__close--InsetBlockStart); inset-inline-end: var(--pf-v6-c-popover__close--InsetInlineEnd); } .pf-v6-c-popover__close + * { padding-inline-end: var(--pf-v6-c-popover__close--sibling--PaddingInlineEnd); } .pf-v6-c-popover__arrow { position: absolute; top: var(--pf-v6-c-popover__arrow--InsetBlockStart, auto); right: var(--pf-v6-c-popover__arrow--InsetInlineEnd, auto); bottom: var(--pf-v6-c-popover__arrow--InsetBlockEnd, auto); left: var(--pf-v6-c-popover__arrow--InsetInlineStart, auto); width: var(--pf-v6-c-popover__arrow--Width); height: var(--pf-v6-c-popover__arrow--Height); pointer-events: none; background-color: var(--pf-v6-c-popover__arrow--BackgroundColor); border: var(--pf-v6-c-popover--BorderWidth) solid var(--pf-v6-c-popover--BorderColor); box-shadow: var(--pf-v6-c-popover__arrow--BoxShadow); transform: translateX(var(--pf-v6-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-popover__arrow--Rotate, 0)); } .pf-v6-c-popover__header { margin-block-end: var(--pf-v6-c-popover__header--MarginBlockEnd); } .pf-v6-c-popover__title { display: flex; flex: 0 0 auto; } .pf-v6-c-popover__title-icon { margin-inline-end: var(--pf-v6-c-popover__title-icon--MarginInlineEnd); font-size: var(--pf-v6-c-popover__title-icon--FontSize); color: var(--pf-v6-c-popover__title-icon--Color); } .pf-v6-c-popover__title-text { min-width: 0; font-size: var(--pf-v6-c-popover__title-text--FontSize); font-weight: var(--pf-v6-c-popover__title-text--FontWeight); color: var(--pf-v6-c-popover__title-text--Color); overflow-wrap: break-word; } .pf-v6-c-popover__body { overflow-wrap: break-word; } .pf-v6-c-popover__footer { margin-block-start: var(--pf-v6-c-popover__footer--MarginBlockStart); } .pf-v6-c-radio { --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm); --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight)); --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-radio__label--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-radio__label--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-radio__description--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-radio__description--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-radio__input--first-child--MarginInlineStart: 0.0625rem; --pf-v6-c-radio__input--last-child--MarginInlineEnd: 0.0625rem; --pf-v6-c-radio__body--MarginBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-radio__input--TranslateY: calc((var(--pf-v6-c-radio__label--LineHeight) * var(--pf-v6-c-radio__label--FontSize) / 2 ) - 50%); } .pf-v6-c-radio { display: grid; grid-template-columns: auto 1fr; gap: var(--pf-v6-c-radio--GridGap); align-items: baseline; accent-color: var(--pf-v6-c-radio--AccentColor); } .pf-v6-c-radio.pf-m-standalone { display: inline-grid; grid-template-columns: auto; min-height: var(--pf-v6-c-radio--m-standalone--MinHeight); } .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input { align-self: center; transform: none; } .pf-v6-c-radio__input { align-self: start; font-size: var(--pf-v6-c-radio__label--FontSize); line-height: var(--pf-v6-c-radio__label--LineHeight); transform: translateY(var(--pf-v6-c-radio__input--TranslateY)); } .pf-v6-c-radio__input:first-child { margin-inline-start: var(--pf-v6-c-radio__input--first-child--MarginInlineStart); } .pf-v6-c-radio__input:last-child { margin-inline-end: var(--pf-v6-c-radio__input--last-child--MarginInlineEnd); } .pf-v6-c-radio__label { font-size: var(--pf-v6-c-radio__label--FontSize); font-weight: var(--pf-v6-c-radio__label--FontWeight); line-height: var(--pf-v6-c-radio__label--LineHeight); color: var(--pf-v6-c-radio__label--Color); } .pf-v6-c-radio__description { grid-column: 2; font-size: var(--pf-v6-c-radio__description--FontSize); color: var(--pf-v6-c-radio__description--Color); } .pf-v6-c-radio__body { grid-column: 2; margin-block-start: var(--pf-v6-c-radio__body--MarginBlockStart); } .pf-v6-c-radio__label, .pf-v6-c-radio__input { justify-self: start; } label.pf-v6-c-radio, .pf-v6-c-radio__label, .pf-v6-c-radio__input { cursor: pointer; } .pf-v6-c-radio__label:disabled, .pf-v6-c-radio__label.pf-m-disabled, .pf-v6-c-radio__input:disabled, .pf-v6-c-radio__input.pf-m-disabled { --pf-v6-c-radio__label--Color: var(--pf-v6-c-radio__label--disabled--Color); cursor: not-allowed; } .pf-v6-c-spinner { --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl); --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter); --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter); --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-spinner--AnimationDuration: 1.4s; --pf-v6-c-spinner--AnimationTimingFunction: linear; --pf-v6-c-spinner--StrokeWidth: 10; --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth); --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out; --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm); --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md); --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg); --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl); --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl); --pf-v6-c-spinner--m-inline--diameter: 1em; } .pf-v6-c-spinner { width: var(--pf-v6-c-spinner--Width); height: var(--pf-v6-c-spinner--Height); overflow: hidden; animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite; } .pf-v6-c-spinner.pf-m-inline { --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter); } .pf-v6-c-spinner.pf-m-xs { --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter); --pf-v6-c-spinner--StrokeWidth: 15; } .pf-v6-c-spinner.pf-m-sm { --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter); } .pf-v6-c-spinner.pf-m-md { --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter); } .pf-v6-c-spinner.pf-m-lg { --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter); } .pf-v6-c-spinner.pf-m-xl { --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter); } .pf-v6-m-no-motion .pf-v6-c-spinner { --pf-v6-c-spinner--AnimationDuration: 0s; } .pf-v6-c-spinner__path { width: 100%; height: 100%; stroke: var(--pf-v6-c-spinner--Color); stroke-width: var(--pf-v6-c-spinner--StrokeWidth); stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 280; transform-origin: 50% 50%; animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite; } @keyframes pf-v6-c-spinner-animation-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pf-v6-c-spinner-animation-dash { 0% { stroke-dashoffset: 280; transform: rotate(0); } 15% { stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4); } 40% { stroke-dasharray: 220; stroke-dashoffset: 150; } 100% { stroke-dashoffset: 280; transform: rotate(720deg); } } .pf-v6-c-menu { --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--xs); --pf-v6-c-menu--Width: auto; --pf-v6-c-menu--MinWidth: auto; --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-menu--PaddingInlineStart: var(--pf-t--global--spacer--xs); --pf-v6-c-menu--PaddingInlineEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md); --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-menu--BorderRadius: calc(var(--pf-v6-c-menu__item--BorderRadius) + var(--pf-v6-c-menu--PaddingBlockStart)); --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3); --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm); --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled); --pf-v6-c-menu--TransitionDuration: 0s; --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); } @media (prefers-reduced-motion: no-preference) { .pf-v6-c-menu { --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default); } } .pf-v6-c-menu { --pf-v6-c-menu--m-plain--BoxShadow: none; --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap); --pf-v6-c-menu__content--Height: auto; --pf-v6-c-menu__content--MaxHeight: none; --pf-v6-c-menu--m-scrollable__content--MaxHeight: 18.75rem; --pf-v6-c-menu__search--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__search--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-menu__footer--BoxShadow: none; --pf-v6-c-menu__footer--BorderColor: transparent; --pf-v6-c-menu__footer--BorderWidth: 0; --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top); --pf-v6-c-menu--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-menu--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-menu__list-item--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-menu__list-item--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-menu__list-item--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-menu__list-item--TransitionProperty: background-color; --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default); --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default); --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-menu__item--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-menu__item--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu__item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-menu__breadcrumb--PaddingBlockStart: 0; --pf-v6-c-menu__breadcrumb--PaddingBlockEnd: 0; --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__group-title--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md)); --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked); --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2); --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle); --pf-v6-c-menu__item--m-selected__item-select-icon--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-menu__item-external--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-menu--m-flyout__menu--top-offset: 0px; --pf-v6-c-menu--m-flyout__menu--left-offset: 0px; --pf-v6-c-menu--m-flyout__menu--m-left--right-offset: 0px; --pf-v6-c-menu--m-flyout__Zindex: var(--pf-t--global--z-index--sm); --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1 + var(--pf-v6-c-menu--m-flyout__menu--top-offset)); --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: auto; --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: auto; --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset)); --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1); --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset)); --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default); --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default); --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height); } @media (prefers-reduced-motion: no-preference) { .pf-v6-c-menu { --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height); } } .pf-v6-c-menu { --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0; --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s; --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform); } @media (prefers-reduced-motion: no-preference) { .pf-v6-c-menu { --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default); } } .pf-v6-c-menu { --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s; --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform); } @media (prefers-reduced-motion: no-preference) { .pf-v6-c-menu { --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default); } } .pf-v6-c-menu { --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs); } .pf-v6-c-menu__content, .pf-v6-c-menu__list-item, .pf-v6-c-menu__item-main, .pf-v6-c-menu__breadcrumb, .pf-v6-c-menu__item-check, .pf-v6-c-menu__item-action, .pf-v6-c-menu__item-action-icon { display: flex; } .pf-v6-c-menu__list, .pf-v6-c-menu__group { --pf-v6-hidden-visible--visible--Display: grid; --pf-v6-hidden-visible--hidden--Display: none; --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); display: var(--pf-v6-hidden-visible--Display); } .pf-v6-c-menu__list.pf-m-hidden, .pf-v6-c-menu__group.pf-m-hidden { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } @media screen and (min-width: 36rem) { .pf-v6-c-menu__list.pf-m-hidden-on-sm, .pf-v6-c-menu__group.pf-m-hidden-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__list.pf-m-visible-on-sm, .pf-v6-c-menu__group.pf-m-visible-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 48rem) { .pf-v6-c-menu__list.pf-m-hidden-on-md, .pf-v6-c-menu__group.pf-m-hidden-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__list.pf-m-visible-on-md, .pf-v6-c-menu__group.pf-m-visible-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 62rem) { .pf-v6-c-menu__list.pf-m-hidden-on-lg, .pf-v6-c-menu__group.pf-m-hidden-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__list.pf-m-visible-on-lg, .pf-v6-c-menu__group.pf-m-visible-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 75rem) { .pf-v6-c-menu__list.pf-m-hidden-on-xl, .pf-v6-c-menu__group.pf-m-hidden-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__list.pf-m-visible-on-xl, .pf-v6-c-menu__group.pf-m-visible-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 90.625rem) { .pf-v6-c-menu__list.pf-m-hidden-on-2xl, .pf-v6-c-menu__group.pf-m-hidden-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__list.pf-m-visible-on-2xl, .pf-v6-c-menu__group.pf-m-visible-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } .pf-v6-c-menu__list, .pf-v6-c-menu__list-item, .pf-v6-c-menu__breadcrumb, .pf-v6-c-menu__footer { position: relative; } .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]), .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) { --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color); --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color); --pf-v6-c-menu__item-external--Color: transparent; --pf-v6-c-menu__item-select-icon--Color: transparent; --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color); --pf-v6-c-menu__list-item--BackgroundColor: transparent; --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent; --pf-v6-c-menu__list-item--hover--BorderColor: transparent; } .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled), .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled) { pointer-events: none; } .pf-v6-c-menu__list-item.pf-m-aria-disabled .pf-v6-c-menu__item, .pf-v6-c-menu__item-action.pf-m-aria-disabled .pf-v6-c-menu__item { cursor: default; } [class*=pf-v6-c-menu]:is([hidden]) { display: none; } .pf-v6-c-menu { display: grid; row-gap: var(--pf-v6-c-menu--RowGap); width: var(--pf-v6-c-menu--Width); min-width: var(--pf-v6-c-menu--MinWidth); padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu--PaddingInlineEnd); overflow: hidden; color: var(--pf-v6-c-menu--Color); background-color: var(--pf-v6-c-menu--BackgroundColor); border: var(--pf-v6-c-menu--BorderWidth) solid var(--pf-v6-c-menu--BorderColor); border-radius: var(--pf-v6-c-menu--BorderRadius); box-shadow: var(--pf-v6-c-menu--BoxShadow); transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important; transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important; } .pf-v6-c-menu .pf-v6-c-menu { min-width: 100%; } .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu .pf-v6-c-menu__content { overflow: visible; } .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu { min-width: 100%; border-radius: 0; } .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu, .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content { overflow: visible; } .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu { position: absolute; inset-block-start: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockStart); inset-block-end: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd); inset-inline-start: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineStart); inset-inline-end: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd); z-index: var(--pf-v6-c-menu--m-flyout__Zindex); border-radius: var(--pf-v6-c-menu--BorderRadius); } .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu .pf-v6-c-menu__content { overflow-y: visible; } .pf-v6-c-menu.pf-m-top { --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: auto; --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: var(--pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd); } .pf-v6-c-menu.pf-m-left { --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: var(--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd); --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: auto; } .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content { overflow: hidden; transition: var(--pf-v6-c-menu--m-drilldown__content--Transition); } .pf-v6-c-menu.pf-m-drilldown :where(.pf-v6-c-menu) { padding: 0; border: 0; } .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list, .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list { transform: translateX(-100%); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list, .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list { transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier))); } .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu { position: absolute; inset-block-start: var(--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart); inset-inline-start: 100%; width: 100%; box-shadow: none; transition: var(--pf-v6-c-menu--m-drilldown--c-menu--Transition); } .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in { transform: translateX(-100%); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in { transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier))); } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list { visibility: visible; overflow: hidden; transition: var(--pf-v6-c-menu--m-drilldown__list--Transition); } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list { --pf-v6-c-menu__list--PaddingBlockStart: 0; --pf-v6-c-menu__list--PaddingBlockEnd: 0; } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path .pf-v6-c-menu { z-index: var(--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex); } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path > .pf-v6-c-menu { overflow: visible; } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static > .pf-v6-c-menu { position: static; } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static:hover { background-color: transparent; } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item:not(.pf-m-current-path) .pf-v6-c-menu { display: none; } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__item { outline-offset: var(--pf-v6-c-menu--OutlineOffset); } .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list { visibility: hidden; overflow: visible; } .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-divider, .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item:not(.pf-m-current-path) { display: none; } .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item.pf-m-current-path { visibility: hidden; } .pf-v6-c-menu.pf-m-plain { --pf-v6-c-menu--BoxShadow: var(--pf-v6-c-menu--m-plain--BoxShadow); } .pf-v6-c-menu.pf-m-scrollable { --pf-v6-c-menu__content--MaxHeight: var(--pf-v6-c-menu--m-scrollable__content--MaxHeight); --pf-v6-c-menu__footer--BoxShadow: var(--pf-v6-c-menu--m-scrollable__footer--BoxShadow); --pf-v6-c-menu__footer--BorderColor: var(--pf-v6-c-menu--m-scrollable__footer--BorderColor); --pf-v6-c-menu__footer--BorderWidth: var(--pf-v6-c-menu--m-scrollable__footer--BorderWidth); --pf-v6-c-menu__footer--PaddingBlockStart: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap)); --pf-v6-c-menu__footer--PaddingBlockEnd: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap)); overflow: hidden; } .pf-v6-c-menu.pf-m-scrollable:has(.pf-v6-c-menu__footer) { --pf-v6-c-menu--PaddingBlockEnd: 0; } .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content, .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list { overflow-y: auto; } .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content { position: relative; z-index: var(--pf-v6-c-menu--ZIndex); margin-block-start: calc(var(--pf-v6-c-menu--RowGap) * -1); margin-block-end: calc(var(--pf-v6-c-menu--RowGap) * -1); } .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list { padding-block-start: var(--pf-v6-c-menu--RowGap); padding-block-end: var(--pf-v6-c-menu--RowGap); } .pf-v6-c-menu__header { padding-block-start: var(--pf-v6-c-menu__header--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu__header--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu__header--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu__header--PaddingInlineEnd); } .pf-v6-c-menu__search { padding-block-start: var(--pf-v6-c-menu__search--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu__search--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu__search--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu__search--PaddingInlineEnd); } .pf-v6-c-menu__footer { padding-block-start: var(--pf-v6-c-menu__footer--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu__footer--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu__footer--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu__footer--PaddingInlineEnd); border-block-start: var(--pf-v6-c-menu__footer--BorderWidth) solid var(--pf-v6-c-menu__footer--BorderColor); box-shadow: var(--pf-v6-c-menu__footer--BoxShadow); } .pf-v6-c-menu__content { flex-direction: column; row-gap: var(--pf-v6-c-menu__content--RowGap); height: var(--pf-v6-c-menu__content--Height); max-height: var(--pf-v6-c-menu__content--MaxHeight); } .pf-v6-c-menu__content .pf-v6-c-menu__content { --pf-v6-c-menu__content--Height: auto; } .pf-v6-c-menu__list :where(.pf-v6-c-divider:is(li)) { margin-block-start: var(--pf-v6-c-menu__list--divider--MarginBlockStart); margin-block-end: var(--pf-v6-c-menu__list--divider--MarginBlockEnd); } .pf-v6-c-menu__list-item { align-items: baseline; min-width: 0; transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction); transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration); transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty); } .pf-v6-c-menu__list-item > * { position: relative; } .pf-v6-c-menu__list-item::before { position: absolute; inset: 0; content: ""; background-color: var(--pf-v6-c-menu__list-item--BackgroundColor); border: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor); border-radius: var(--pf-v6-c-menu__item--BorderRadius); transition: inherit; } .pf-v6-c-menu__list-item.pf-m-load { --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color); } .pf-v6-c-menu__list-item.pf-m-loading { justify-content: center; overflow: hidden; pointer-events: none; } .pf-v6-c-menu__list-item.pf-m-loading .pf-v6-c-menu__item-text { text-align: center; } .pf-v6-c-menu__list-item.pf-m-danger { --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--Color); } .pf-v6-c-menu__list-item.pf-m-danger:is(:hover, :focus) { --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--hover--Color, var(--pf-v6-c-menu__list-item--m-danger--Color)); } .pf-v6-c-menu__list-item:has(.pf-v6-c-menu__item-action) { padding-inline-end: var(--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd); } .pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) { --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor); --pf-v6-c-menu__list-item--BorderWidth: var(--pf-v6-c-menu__list-item--hover--BorderWidth); } .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon, .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-select-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-select-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-external-icon { opacity: 1; } .pf-v6-c-menu__item { flex-basis: 100%; flex-direction: column; min-width: 0; padding-block-start: var(--pf-v6-c-menu__item--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu__item--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu__item--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu__item--PaddingInlineEnd); font-size: var(--pf-v6-c-menu__item--FontSize); font-weight: var(--pf-v6-c-menu__item--FontWeight); line-height: var(--pf-v6-c-menu__item--LineHeight); color: var(--pf-v6-c-menu__item--Color); text-align: start; text-decoration-line: none; outline-offset: var(--pf-v6-c-menu--OutlineOffset); background-color: var(--pf-v6-c-menu__item--BackgroundColor); border: 0; border-radius: var(--pf-v6-c-menu__item--BorderRadius); --pf-v6-hidden-visible--visible--Display: flex; --pf-v6-hidden-visible--hidden--Display: none; --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); display: var(--pf-v6-hidden-visible--Display); } .pf-v6-c-menu__item.pf-m-hidden { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } @media screen and (min-width: 36rem) { .pf-v6-c-menu__item.pf-m-hidden-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__item.pf-m-visible-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 48rem) { .pf-v6-c-menu__item.pf-m-hidden-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__item.pf-m-visible-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 62rem) { .pf-v6-c-menu__item.pf-m-hidden-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__item.pf-m-visible-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 75rem) { .pf-v6-c-menu__item.pf-m-hidden-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__item.pf-m-visible-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 90.625rem) { .pf-v6-c-menu__item.pf-m-hidden-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__item.pf-m-visible-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } :where(label).pf-v6-c-menu__item { cursor: pointer; } .pf-v6-c-menu__item.pf-m-selected { --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color); } .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon, .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon { opacity: 1; } .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon { color: var(--pf-v6-c-menu__item-external--Color); } .pf-v6-c-menu__item-select-icon { color: var(--pf-v6-c-menu__item-select-icon--Color); } .pf-v6-c-menu__item-main { column-gap: var(--pf-v6-c-menu__item-main--ColumnGap); align-items: center; width: 100%; } .pf-v6-c-menu__item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; } .pf-v6-c-menu__group-title { padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd); font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit); font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit); color: var(--pf-v6-c-menu__group-title--Color); } .pf-v6-c-menu__item-description { font-size: var(--pf-v6-c-menu__item-description--FontSize); color: var(--pf-v6-c-menu__item-description--Color); overflow-wrap: break-word; } .pf-v6-c-menu__item-check .pf-v6-c-check { --pf-v6-c-check__input--TranslateY: none; } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon { scale: -1 1; } .pf-v6-c-menu__item-toggle-icon { color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit); } .pf-v6-c-menu__item-icon { color: var(--pf-v6-c-menu__item--icon--Color, inherit); } .pf-v6-c-menu__item-select-icon, .pf-v6-c-menu__item-external-icon { opacity: 0; } .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited), .pf-v6-c-menu__item-action.pf-m-favorited, .pf-v6-c-menu__item-action.pf-m-favorited:hover, .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) { --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color); } .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus), .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) { --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color); } .pf-v6-c-menu__breadcrumb { --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize); padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd); } .pf-v6-c-menu__breadcrumb .pf-v6-c-menu { min-width: auto; padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd); } .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content { height: auto; } .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle { --pf-v6-c-menu-toggle--BorderWidth: 0; --pf-v6-c-menu-toggle--BorderColor: transparent; outline-offset: var(--pf-v6-c-menu--OutlineOffset); } .pf-v6-c-breadcrumb { --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm); --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default); --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default); --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default); --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default); --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover); --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover); --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover); --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover); --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-breadcrumb__link--BackgroundColor: transparent; --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize); --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs); } .pf-v6-c-breadcrumb { display: inline-flex; } .pf-v6-c-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; } .pf-v6-c-breadcrumb__item { display: flex; align-items: baseline; font-size: var(--pf-v6-c-breadcrumb__item--FontSize); font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight); line-height: var(--pf-v6-c-breadcrumb__item--LineHeight); white-space: nowrap; list-style: none; } .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) { --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0; } .pf-v6-c-breadcrumb__item:not(:last-child) { margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider { scale: -1 1; } .pf-v6-c-breadcrumb__item-divider { margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd); font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize); line-height: 1; color: var(--pf-v6-c-breadcrumb__item-divider--Color); } .pf-v6-c-breadcrumb__link { padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd); font-size: inherit; font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight); line-height: inherit; color: var(--pf-v6-c-breadcrumb__link--Color); overflow-wrap: break-word; text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine); text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle); text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor); background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor); } .pf-v6-c-breadcrumb__link:is(:hover, :focus) { --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color); --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine); --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle); --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor); } .pf-v6-c-breadcrumb__link.pf-m-current { cursor: default; } .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) { color: var(--pf-v6-c-breadcrumb__link--m-current--Color); text-decoration-line: none; } button.pf-v6-c-breadcrumb__link { border: none; } .pf-v6-c-breadcrumb__dropdown { margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart); margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart); margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd); } .pf-v6-c-breadcrumb__heading { display: inline; font-size: var(--pf-v6-c-breadcrumb__heading--FontSize); } .pf-v6-c-breadcrumb__link, .pf-v6-c-breadcrumb__heading { white-space: normal; } .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider { display: none; } .pf-v6-c-badge { --pf-v6-c-badge--BorderColor: transparent; --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular); --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default); --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl); --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs); --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default); --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default); --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default); --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default); --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default); --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled); --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); } .pf-v6-c-badge { position: relative; display: inline-block; min-width: var(--pf-v6-c-badge--MinWidth); padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd); font-size: var(--pf-v6-c-badge--FontSize); font-weight: var(--pf-v6-c-badge--FontWeight); color: var(--pf-v6-c-badge--Color); text-align: center; white-space: nowrap; background-color: var(--pf-v6-c-badge--BackgroundColor); border-radius: var(--pf-v6-c-badge--BorderRadius); } .pf-v6-c-badge::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor); border-radius: inherit; } .pf-v6-c-badge.pf-m-read { --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor); --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color); --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor); --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color); } .pf-v6-c-badge.pf-m-unread { --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color); --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor); --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color); } .pf-v6-c-badge.pf-m-disabled { --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color); --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor); } .pf-v6-c-badge.pf-m-disabled::after { border-color: var(--pf-v6-c-badge--m-disabled--BorderColor); } .pf-v6-c-badge__toggle-icon { margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart); color: var(--pf-v6-c-badge__toggle-icon--Color); }