UNPKG

@patternfly/react-core

Version:

This library provides a set of common React components for use with the PatternFly reference implementation.

868 lines (777 loc) • 1.19 MB
@charset "UTF-8"; .pf-v6-c-popover[data-popper-reference-hidden=true] { visibility: hidden; 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-icons--ColumnGap: 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); column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap); } .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-accordion { --pf-v6-c-accordion--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-accordion--RowGap: var(--pf-t--global--spacer--xs); --pf-v6-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200); --pf-v6-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction); --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg; --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem; --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__expandable-content-body--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingBlockStart: 0; --pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-t--global--font--family--heading); --pf-v6-c-accordion--m-display-lg__toggle--FontSize: var(--pf-t--global--font--size--heading--sm); --pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-accordion--m-display-lg__expandable-content--FontSize: var(--pf-t--global--font--size--body--lg); --pf-v6-c-accordion--m-display-lg__expandable-content--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-accordion--m-bordered--RowGap: 0; --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default); } .pf-v6-c-accordion { display: flex; flex-direction: column; row-gap: var(--pf-v6-c-accordion--RowGap); background-color: var(--pf-v6-c-accordion--BackgroundColor); } .pf-v6-c-accordion.pf-m-toggle-start { --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap); } .pf-v6-c-accordion.pf-m-display-lg { --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockStart); --pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineEnd); --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockEnd); --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBlockEnd); --pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineStart); --pf-v6-c-accordion__toggle--FontFamily: var(--pf-v6-c-accordion--m-display-lg__toggle--FontFamily); --pf-v6-c-accordion__toggle--FontSize: var(--pf-v6-c-accordion--m-display-lg__toggle--FontSize); --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight); --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight); --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-v6-c-accordion--m-display-lg__expandable-content--FontSize); --pf-v6-c-accordion__expandable-content--Color: var(--pf-v6-c-accordion--m-display-lg__expandable-content--Color); } .pf-v6-c-accordion.pf-m-bordered { --pf-v6-c-accordion--RowGap: var(--pf-v6-c-accordion--m-bordered--RowGap); --pf-v6-c-accordion__item--BorderRadius: 0; --pf-v6-c-accordion__toggle--BorderRadius: 0; } .pf-v6-c-accordion.pf-m-bordered .pf-v6-c-accordion__item { border-block-end: var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth) solid var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor); } .pf-v6-c-accordion__item { border-radius: var(--pf-v6-c-accordion__item--BorderRadius); } .pf-v6-c-accordion__item.pf-m-expanded { --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd); --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight); background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor); } .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon { transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate)); } .pf-v6-c-accordion__toggle { display: flex; column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap); align-items: center; width: 100%; padding-block-start: var(--pf-v6-c-accordion__toggle--PaddingBlockStart); padding-block-end: var(--pf-v6-c-accordion__toggle--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-accordion__toggle--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-accordion__toggle--PaddingInlineEnd); font-family: var(--pf-v6-c-accordion__toggle--FontFamily, inherit); font-size: var(--pf-v6-c-accordion__toggle--FontSize, inherit); text-align: start; background-color: var(--pf-v6-c-accordion__toggle--BackgroundColor); border: 0; border-radius: var(--pf-v6-c-accordion__toggle--BorderRadius); } .pf-v6-c-accordion__toggle:is(:hover, :focus) { --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-v6-c-accordion__toggle--hover--BackgroundColor); } .pf-v6-c-accordion__toggle-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; font-weight: var(--pf-v6-c-accordion__toggle-text--FontWeight); color: var(--pf-v6-c-accordion__toggle-text--Color); } .pf-v6-c-accordion__toggle-icon { transition: var(--pf-v6-c-accordion__toggle-icon--Transition); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon { scale: -1 1; } .pf-v6-c-accordion__expandable-content { margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart); margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd); font-size: var(--pf-v6-c-accordion__expandable-content--FontSize); color: var(--pf-v6-c-accordion__expandable-content--Color); background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor); border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius); } .pf-v6-c-accordion__expandable-content.pf-m-fixed { max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight); overflow-y: auto; } .pf-v6-c-accordion__expandable-content-body { padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart); padding-block-end: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd); } .pf-v6-c-accordion__expandable-content-body + .pf-v6-c-accordion__expandable-content-body { --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingBlockStart); } .pf-v6-c-alert-group { --pf-v6-c-alert-group__item--MarginBlockStart: var(--pf-t--global--spacer--gap--group--vertical); --pf-v6-c-alert-group--m-toast--InsetBlockStart: var(--pf-t--global--spacer--2xl); --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem; --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl); --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-alert-group--m-toast__item--Transition--opacity--default: var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default) 0s; --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none); --pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default); --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none); --pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default); --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default); --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default); --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-alert-group--m-toast__item--c-alert--Transition: all var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration) var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction) 0s; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration); --pf-v6-c-alert-group__overflow-button--BorderWidth: 0; --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium); --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-alert-group__overflow-button--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-alert-group__overflow-button--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-alert-group__overflow-button--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default); --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg); --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-alert-group__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover); --pf-v6-c-alert-group__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover); --pf-v6-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom); --pf-v6-c-alert-group__overflow-button--focus--Color: var(--pf-t--global--text--color--link--hover); --pf-v6-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom); --pf-v6-c-alert-group__overflow-button--active--Color: var(--pf-t--global--text--color--link--hover); --pf-v6-c-alert-group__overflow-button--active--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom); } .pf-v6-c-alert-group > * + * { margin-block-start: var(--pf-v6-c-alert-group__item--MarginBlockStart); } .pf-v6-c-alert-group.pf-m-toast { position: fixed; inset-block-start: var(--pf-v6-c-alert-group--m-toast--InsetBlockStart); inset-inline-end: var(--pf-v6-c-alert-group--m-toast--InsetInlineEnd); z-index: var(--pf-v6-c-alert-group--m-toast--ZIndex); width: calc(100% - var(--pf-v6-c-alert-group--m-toast--InsetInlineEnd) * 2); max-width: var(--pf-v6-c-alert-group--m-toast--MaxWidth); } .pf-v6-c-alert-group__overflow-button { position: relative; width: 100%; padding-block-start: var(--pf-v6-c-alert-group__overflow-button--PaddingBlockStart); padding-block-end: var(--pf-v6-c-alert-group__overflow-button--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-alert-group__overflow-button--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-alert-group__overflow-button--PaddingInlineEnd); color: var(--pf-v6-c-alert-group__overflow-button--Color); background-color: var(--pf-v6-c-alert-group__overflow-button--BackgroundColor); border-width: var(--pf-v6-c-alert-group__overflow-button--BorderWidth); border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius); box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow); } .pf-v6-c-alert-group__item { display: grid; grid-template-rows: 1fr; opacity: 1; transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default); transform: translateX(0) translateY(0); } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-alert-group__item { transition: opacity var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity), transform var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows), margin-block var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block); } .pf-v6-c-alert-group__item .pf-v6-c-alert { transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition); } } .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child { grid-template-rows: 0fr; margin-block: 0; overflow: hidden; opacity: 0; transform: translateY(-100%); } .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert { min-height: 0; padding-block-start: 0; padding-block-end: 0; border-width: 0; } .pf-v6-c-alert-group__item.pf-m-offstage-right { grid-template-rows: 0fr; margin-block: 0; overflow: hidden; opacity: 0; transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default); } .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert { min-height: 0; padding-block-start: 0; padding-block-end: 0; border-width: 0; transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default); } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-alert-group__item.pf-m-offstage-right { transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows); transform: translateX(100%); } .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert { transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition); } } .pf-v6-c-alert-group__item:hover { --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color); --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor); --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow); } .pf-v6-c-alert-group__item:focus { --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color); --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow); } .pf-v6-c-alert-group__item:active { --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color); --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow); } .pf-v6-c-back-to-top { --pf-v6-c-back-to-top--InsetInlineEnd: var(--pf-t--global--spacer--2xl); --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-back-to-top--md--InsetBlockEnd: var(--pf-t--global--spacer--2xl); --pf-v6-c-back-to-top--c-button--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-back-to-top--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-back-to-top--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-back-to-top--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-back-to-top--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-back-to-top--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm); } @media (min-width: 48rem) { .pf-v6-c-back-to-top { --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-v6-c-back-to-top--md--InsetBlockEnd); } } .pf-v6-c-back-to-top { position: absolute; inset-block-end: var(--pf-v6-c-back-to-top--InsetBlockEnd); inset-inline-end: var(--pf-v6-c-back-to-top--InsetInlineEnd); } .pf-v6-c-back-to-top.pf-m-hidden { display: none; } .pf-v6-c-back-to-top .pf-v6-c-button { --pf-v6-c-button--FontSize: var(--pf-v6-c-back-to-top--c-button--FontSize); --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-back-to-top--c-button--PaddingBlockStart); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-back-to-top--c-button--PaddingInlineEnd); --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-back-to-top--c-button--PaddingBlockEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-back-to-top--c-button--PaddingInlineStart); box-shadow: var(--pf-v6-c-back-to-top--c-button--BoxShadow); } .pf-v6-c-alert { --pf-v6-c-alert--BoxShadow: var(--pf-t--global--box-shadow--lg); --pf-v6-c-alert--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-alert--GridTemplateColumns: max-content 1fr max-content; --pf-v6-c-alert--GridTemplateAreas: "icon title action" ". description description" ". actiongroup actiongroup"; --pf-v6-c-alert--BorderWidth: var(--pf-t--global--border--width--box--status--default); --pf-v6-c-alert--BorderColor: transparent; --pf-v6-c-alert--BorderRadius: var(--pf-t--global--border--radius--medium); --pf-v6-c-alert--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-alert--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-alert__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default)); --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default)); --pf-v6-c-alert__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--action--horizontal--plain--default)); --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-alert__toggle-icon--Rotate: 0; --pf-v6-c-alert__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-alert__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long); --pf-v6-c-alert__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-alert__icon--MarginBlockStart: 0.25rem; --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md); --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-alert__title--max-lines: 1; --pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-alert__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-alert__action--TranslateY: 0.125rem; --pf-v6-c-alert__action--MarginInlineEnd: calc(var(--pf-t--global--spacer--sm) * -1); --pf-v6-c-alert__description--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-alert__action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm); --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base); --pf-v6-c-alert__description--action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm); --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base); --pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default); --pf-v6-c-alert--m-custom--BorderColor: var(--pf-t--global--border--color--status--custom--default); --pf-v6-c-alert--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default); --pf-v6-c-alert--m-custom__title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-alert--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default); --pf-v6-c-alert--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default); --pf-v6-c-alert--m-success__title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-alert--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default); --pf-v6-c-alert--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default); --pf-v6-c-alert--m-danger__title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-alert--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default); --pf-v6-c-alert--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default); --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-alert--m-info--BorderColor: var(--pf-t--global--border--color--status--info--default); --pf-v6-c-alert--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default); --pf-v6-c-alert--m-info__title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-alert--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-alert--m-inline--BoxShadow: none; --pf-v6-c-alert--m-inline--m-plain--BorderWidth: 0; --pf-v6-c-alert--m-inline--m-plain--BackgroundColor: transparent; --pf-v6-c-alert--m-inline--m-plain--PaddingBlockStart: 0; --pf-v6-c-alert--m-inline--m-plain--PaddingInlineEnd: 0; --pf-v6-c-alert--m-inline--m-plain--PaddingBlockEnd: 0; --pf-v6-c-alert--m-inline--m-plain--PaddingInlineStart: 0; --pf-v6-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content; --pf-v6-c-alert--m-expandable--GridTemplateAreas: "toggle icon title action" ". . description description" ". . actiongroup actiongroup"; --pf-v6-c-alert--m-expandable__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base); --pf-v6-c-alert--m-expanded__toggle-icon--Rotate: 90deg; --pf-v6-c-alert--m-expanded__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base); } .pf-v6-c-alert { position: relative; display: grid; grid-template-areas: var(--pf-v6-c-alert--GridTemplateAreas); grid-template-columns: var(--pf-v6-c-alert--GridTemplateColumns); padding-block-start: var(--pf-v6-c-alert--PaddingBlockStart); padding-block-end: var(--pf-v6-c-alert--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-alert--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-alert--PaddingInlineEnd); font-size: var(--pf-v6-c-alert--FontSize); background-color: var(--pf-v6-c-alert--BackgroundColor); border: var(--pf-v6-c-alert--BorderWidth) solid var(--pf-v6-c-alert--BorderColor); border-radius: var(--pf-v6-c-alert--BorderRadius); box-shadow: var(--pf-v6-c-alert--BoxShadow); } .pf-v6-c-alert.pf-m-custom { --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-custom--BorderColor); --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-custom__icon--Color); --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-custom__title--Color); } .pf-v6-c-alert.pf-m-success { --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-success--BorderColor); --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-success__icon--Color); --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-success__title--Color); } .pf-v6-c-alert.pf-m-danger { --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-danger--BorderColor); --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-danger__icon--Color); --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-danger__title--Color); } .pf-v6-c-alert.pf-m-warning { --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-warning--BorderColor); --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-warning__icon--Color); --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-warning__title--Color); } .pf-v6-c-alert.pf-m-info { --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-info--BorderColor); --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-info__icon--Color); --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-info__title--Color); } .pf-v6-c-alert.pf-m-inline { --pf-v6-c-alert--BoxShadow: var(--pf-v6-c-alert--m-inline--BoxShadow); --pf-v6-c-alert--BackgroundColor: var(--pf-v6-c-alert--m-inline--BackgroundColor); } .pf-v6-c-alert.pf-m-plain { --pf-v6-c-alert--BorderWidth: var(--pf-v6-c-alert--m-inline--m-plain--BorderWidth); --pf-v6-c-alert--BackgroundColor: var(--pf-v6-c-alert--m-inline--m-plain--BackgroundColor); --pf-v6-c-alert--PaddingBlockStart: var(--pf-v6-c-alert--m-inline--m-plain--PaddingBlockStart); --pf-v6-c-alert--PaddingInlineEnd: var(--pf-v6-c-alert--m-inline--m-plain--PaddingInlineEnd); --pf-v6-c-alert--PaddingBlockEnd: var(--pf-v6-c-alert--m-inline--m-plain--PaddingBlockEnd); --pf-v6-c-alert--PaddingInlineStart: var(--pf-v6-c-alert--m-inline--m-plain--PaddingInlineStart); } .pf-v6-c-alert.pf-m-expandable { --pf-v6-c-alert--GridTemplateColumns: var(--pf-v6-c-alert--m-expandable--GridTemplateColumns); --pf-v6-c-alert--GridTemplateAreas: var(--pf-v6-c-alert--m-expandable--GridTemplateAreas); --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert--m-expandable__description--action-group--PaddingBlockStart); } .pf-v6-c-alert.pf-m-expanded { --pf-v6-c-alert__toggle-icon--Rotate: var(--pf-v6-c-alert--m-expanded__toggle-icon--Rotate); --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert--m-expanded__description--action-group--PaddingBlockStart); } .pf-v6-c-alert__toggle { margin-block-start: var(--pf-v6-c-alert__toggle--MarginBlockStart); margin-block-end: var(--pf-v6-c-alert__toggle--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-alert__toggle--MarginInlineStart); margin-inline-end: var(--pf-v6-c-alert__toggle--MarginInlineEnd); } .pf-v6-c-alert__toggle-icon { display: inline-block; transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction); transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate)); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon { scale: -1 1; } .pf-v6-c-alert__icon { grid-area: icon; margin-inline-end: var(--pf-v6-c-alert__icon--MarginInlineEnd); font-size: var(--pf-v6-c-alert__icon--FontSize); color: var(--pf-v6-c-alert__icon--Color); } .pf-v6-c-alert__title { grid-area: title; font-weight: var(--pf-v6-c-alert__title--FontWeight); color: var(--pf-v6-c-alert__title--Color); word-break: break-word; } .pf-v6-c-alert__title.pf-m-truncate { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--pf-v6-c-alert__title--max-lines); overflow: hidden; } .pf-v6-c-alert__description { grid-area: description; padding-block-start: var(--pf-v6-c-alert__description--PaddingBlockStart); word-break: break-word; } .pf-v6-c-alert__description + .pf-v6-c-alert__action-group { --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart); } .pf-v6-c-alert__action { grid-area: action; margin-block-start: var(--pf-v6-c-alert__action--MarginBlockStart); margin-block-end: var(--pf-v6-c-alert__action--MarginBlockEnd); margin-inline-end: var(--pf-v6-c-alert__action--MarginInlineEnd); } .pf-v6-c-alert__action-group { grid-area: actiongroup; padding-block-start: var(--pf-v6-c-alert__action-group--PaddingBlockStart); } .pf-v6-c-alert__action-group > .pf-v6-c-button:not(:last-child) { margin-inline-end: var(--pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd); } .pf-v6-c-backdrop { --pf-v6-c-backdrop--Position: fixed; --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg); --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default); } .pf-v6-c-backdrop { position: var(--pf-v6-c-backdrop--Position); inset-block-start: 0; inset-inline-start: 0; z-index: var(--pf-v6-c-backdrop--ZIndex); width: 100%; height: 100%; background-color: var(--pf-v6-c-backdrop--BackgroundColor); } .pf-v6-c-backdrop__open { overflow: hidden; } .pf-v6-c-banner { --pf-v6-c-banner--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-banner--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-banner--md--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-banner--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-banner--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-banner--md--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-banner--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default); --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color); --pf-v6-c-banner--link--TextDecoration: underline; --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color); --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md); --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md); --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default); --pf-v6-c-banner--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default); --pf-v6-c-banner--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default); --pf-v6-c-banner--m-success--Color: var(--pf-t--global--text--color--status--on-success--default); --pf-v6-c-banner--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default); --pf-v6-c-banner--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default); --pf-v6-c-banner--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default); --pf-v6-c-banner--m-info--Color: var(--pf-t--global--text--color--status--on-info--default); --pf-v6-c-banner--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default); --pf-v6-c-banner--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default); --pf-v6-c-banner--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default); --pf-v6-c-banner--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default); --pf-v6-c-banner--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default); --pf-v6-c-banner--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default); --pf-v6-c-banner--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default); --pf-v6-c-banner--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default); --pf-v6-c-banner--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default); --pf-v6-c-banner--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default); --pf-v6-c-banner--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default); --pf-v6-c-banner--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default); --pf-v6-c-banner--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default); --pf-v6-c-banner--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default); --pf-v6-c-banner--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default); --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default); --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default); --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default); } @media (min-width: 48rem) { .pf-v6-c-banner { --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd); --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart); } } .pf-v6-c-banner { flex-shrink: 0; padding-block-start: var(--pf-v6-c-banner--PaddingBlockStart); padding-block-end: var(--pf-v6-c-banner--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-banner--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-banner--PaddingInlineEnd); font-size: var(--pf-v6-c-banner--FontSize); color: var(--pf-v6-c-banner--Color); white-space: nowrap; background-color: var(--pf-v6-c-banner--BackgroundColor); } .pf-v6-c-banner.pf-m-danger { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-danger--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-danger--Color); } .pf-v6-c-banner.pf-m-success { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-success--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-success--Color); } .pf-v6-c-banner.pf-m-warning { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-warning--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-warning--Color); } .pf-v6-c-banner.pf-m-info { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-info--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-info--Color); } .pf-v6-c-banner.pf-m-custom { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-custom--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-custom--Color); } .pf-v6-c-banner.pf-m-red { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-red--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-red--Color); } .pf-v6-c-banner.pf-m-orangered { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-orangered--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-orangered--Color); } .pf-v6-c-banner.pf-m-orange { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-orange--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-orange--Color); } .pf-v6-c-banner.pf-m-yellow { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-yellow--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-yellow--Color); } .pf-v6-c-banner.pf-m-green { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-green--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-green--Color); } .pf-v6-c-banner.pf-m-teal { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-teal--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-teal--Color); } .pf-v6-c-banner.pf-m-blue { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-blue--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-blue--Color); } .pf-v6-c-banner.pf-m-purple { --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-purple--BackgroundColor); --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-purple--Color); } .pf-v6-c-banner.pf-m-sticky { position: sticky; inset-block-start: 0; z-index: var(--pf-v6-c-banner--m-sticky--ZIndex); box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow); } .pf-v6-c-banner a { color: var(--pf-v6-c-banner--link--Color); text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration); } .pf-v6-c-banner a:hover:not(.pf-m-disabled) { --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color); } .pf-v6-c-banner a.pf-m-disabled { --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--disabled--Color); cursor: not-allowed; } .pf-v6-c-banner .pf-v6-c-button.pf-m-inline { --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color); --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color); --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color); text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration); } .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled { cursor: not-allowed; } .pf-v6-c-avatar { --pf-v6-c-avatar--BorderColor: transparent; --pf-v6-c-avatar--BorderWidth: 0; --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-avatar--Width: 2.25rem; --pf-v6-c-avatar--Height: 2.25rem; --pf-v6-c-avatar--m-sm--Width: 1.5rem; --pf-v6-c-avatar--m-sm--Height: 1.5rem; --pf-v6-c-avatar--m-md--Width: 2.25rem; --pf-v6-c-avatar--m-md--Height: 2.25rem; --pf-v6-c-avatar--m-lg--Width: 4.5rem; --pf-v6-c-avatar--m-lg--Height: 4.5rem; --pf-v6-c-avatar--m-xl--Width: 8rem; --pf-v6-c-avatar--m-xl--Height: 8rem; --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default); } .pf-v6-c-avatar { width: var(--pf-v6-c-avatar--Width); height: var(--pf-v6-c-avatar--Height); border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor); border-radius: var(--pf-v6-c-avatar--BorderRadius); } .pf-v6-c-avatar.pf-m-bordered { --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-bordered--BorderColor); --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-bordered--BorderWidth); } .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width); --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height); } @media (min-width: 36rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width)); } } @media (min-width: 48rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))); } } @media (min-width: 62rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width)))); } } @media (min-width: 75rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))))); } } @media (min-width: 90.625rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-2xl, var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width)))))); } } @media (min-width: 36rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height)); } } @media (min-width: 48rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height))); } } @media (min-width: 62rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-lg, var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height)))); } } @media (min-width: 75rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-xl, var(--pf-v6-c-avatar--m-sm--Height-on-lg, var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Hei