UNPKG

@patternfly/patternfly

Version:

Assets, source, tooling, and content for PatternFly 4

761 lines (730 loc) • 1.39 MB
@charset "UTF-8"; .pf-v6-c-about-modal-box { --pf-v6-c-about-modal-box--BackgroundImage: none; --pf-v6-c-about-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-about-modal-box--BackgroundSize--min-width: 200px; --pf-v6-c-about-modal-box--BackgroundSize--width: 60%; --pf-v6-c-about-modal-box--BackgroundSize--max-width: 600px; --pf-v6-c-about-modal-box--BackgroundSize: clamp(var(--pf-v6-c-about-modal-box--BackgroundSize--min-width), var(--pf-v6-c-about-modal-box--BackgroundSize--width), var(--pf-v6-c-about-modal-box--BackgroundSize--max-width)); --pf-v6-c-about-modal-box--Height: 100%; --pf-v6-c-about-modal-box--lg--Height: 47.625rem; --pf-v6-c-about-modal-box--Width: 100%; --pf-v6-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr; --pf-v6-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr; --pf-v6-c-about-modal-box__brand--PaddingBlockStart: var(--pf-t--global--spacer--2xl); --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-t--global--spacer--xl); --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl); --pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl); --pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl); --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl); --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl); --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl); --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl); --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg); --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem; --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl); --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl); --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl); --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl); --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl); --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl); --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl); --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl); --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl); } @media screen and (min-width: 36rem) { .pf-v6-c-about-modal-box { --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd); --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart); --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd); } } @media only screen and (min-width: 36rem) { .pf-v6-c-about-modal-box { --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd); } } @media only screen and (min-width: 62rem) { .pf-v6-c-about-modal-box { --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd); } } @media only screen and (min-width: 36rem) { .pf-v6-c-about-modal-box { --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd); --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart); } } @media only screen and (min-width: 36rem) { .pf-v6-c-about-modal-box { --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart); } } @media only screen and (min-width: 36rem) { .pf-v6-c-about-modal-box { --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart); --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginInlineEnd); --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockEnd); --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-v6-c-about-modal-box__content--sm--MarginInlineStart); } } .pf-v6-c-about-modal-box { position: relative; display: grid; grid-template-areas: "brand close" "header header" "content content"; grid-template-rows: max-content max-content auto; width: var(--pf-v6-c-about-modal-box--Width); height: var(--pf-v6-c-about-modal-box--Height); overflow-x: hidden; overflow-y: auto; background-color: var(--pf-v6-c-about-modal-box--BackgroundColor); background-image: var(--pf-v6-c-about-modal-box--BackgroundImage); background-repeat: no-repeat; background-position: var(--pf-v6-c-about-modal-box--BackgroundPosition); background-size: var(--pf-v6-c-about-modal-box--BackgroundSize); --pf-v6-c-about-modal-box--BackgroundPosition: bottom right; } @media only screen and (min-width: 36rem) { .pf-v6-c-about-modal-box { grid-template-areas: "brand close" "header close" "content close"; grid-template-columns: var(--pf-v6-c-about-modal-box--sm--GridTemplateColumns); } } @media only screen and (min-width: 62rem) { .pf-v6-c-about-modal-box { --pf-v6-c-about-modal-box--Height: var(--pf-v6-c-about-modal-box--lg--Height); --pf-v6-c-about-modal-box--Width: var(--pf-v6-c-about-modal-box--lg--Width); grid-template-rows: max-content max-content auto; grid-template-columns: var(--pf-v6-c-about-modal-box--lg--GridTemplateColumns); } } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-about-modal-box { --pf-v6-c-about-modal-box--BackgroundPosition: bottom left; } .pf-v6-c-about-modal-box__brand { display: flex; grid-area: brand; padding-block-start: var(--pf-v6-c-about-modal-box__brand--PaddingBlockStart); padding-block-end: var(--pf-v6-c-about-modal-box__brand--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-about-modal-box__brand--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-about-modal-box__brand--PaddingInlineEnd); } .pf-v6-c-about-modal-box__brand-image { height: var(--pf-v6-c-about-modal-box__brand-image--Height); } .pf-v6-c-about-modal-box__header { display: flex; flex-direction: column; grid-area: header; padding-block-end: var(--pf-v6-c-about-modal-box__header--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-about-modal-box__header--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-about-modal-box__header--PaddingInlineEnd); } .pf-v6-c-about-modal-box__strapline { padding-block-start: var(--pf-v6-c-about-modal-box__strapline--PaddingBlockStart); margin-block-start: auto; font-size: var(--pf-v6-c-about-modal-box__strapline--FontSize); color: var(--pf-v6-c-about-modal-box__strapline--Color); } .pf-v6-c-about-modal-box__content { display: flex; flex-direction: column; grid-area: content; margin-block-start: var(--pf-v6-c-about-modal-box__content--MarginBlockStart); margin-block-end: var(--pf-v6-c-about-modal-box__content--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-about-modal-box__content--MarginInlineStart); margin-inline-end: var(--pf-v6-c-about-modal-box__content--MarginInlineEnd); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; word-break: break-word; -webkit-overflow-scrolling: touch; } @media screen and (min-width: 36rem) { .pf-v6-c-about-modal-box__content { overflow: visible; overscroll-behavior: auto; } } .pf-v6-c-about-modal-box__close { position: sticky; inset-block-start: 0; display: flex; grid-area: close; align-items: flex-start; justify-content: flex-end; padding-block-start: var(--pf-v6-c-about-modal-box__close--PaddingBlockStart); padding-block-end: var(--pf-v6-c-about-modal-box__close--PaddingBlockEnd); padding-inline-end: var(--pf-v6-c-about-modal-box__close--PaddingInlineEnd); } @media only screen and (min-width: 36rem) { .pf-v6-c-about-modal-box__close { grid-area: 1/2; justify-content: center; } } @media only screen and (min-width: 62rem) { .pf-v6-c-about-modal-box__close { justify-content: flex-end; } } .pf-v6-c-about-modal-box__close .pf-v6-c-button.pf-m-plain { font-size: var(--pf-v6-c-about-modal-box__close--c-button--FontSize); } .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__toggle--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-accordion__toggle--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-accordion__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-accordion__toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --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-icon--Rotate: 0; --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: 0; --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--base: 0; --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem; --pf-v6-c-accordion__expandable-content--MaxHeight: 0; --pf-v6-c-accordion__expandable-content--Visibility: hidden; --pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility: visible; --pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight: 99999px; --pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade); --pf-v6-c-accordion__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-accordion__item--before--Opacity: 0; --pf-v6-c-accordion__item--m-expanded--before--Opacity: 1; --pf-v6-c-accordion__item--m-expanded--before--TranslateY: 0; --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: 0s; --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: 0s; --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide); --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade); --pf-v6-c-accordion__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-accordion__expandable-content--Opacity: 0; --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1; --pf-v6-c-accordion__expandable-content--TranslateY: 0; --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0; --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__item--BorderWidth: 0; --pf-v6-c-accordion__item--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-accordion__expandable-content--BorderWidth: 0; --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-accordion { --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-accordion__item--before--TranslateY: -.5rem; --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem; } } .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__item--BorderWidth: 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 { position: relative; } .pf-v6-c-accordion__item::before { position: absolute; inset: 0; pointer-events: none; content: ""; background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor); border: var(--pf-v6-c-accordion__item--BorderWidth) solid var(--pf-v6-c-accordion__item--BorderColor); border-radius: var(--pf-v6-c-accordion__item--BorderRadius); opacity: var(--pf-v6-c-accordion__item--before--Opacity); transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction); transition-duration: var(--pf-v6-c-accordion__item--before--TransitionDuration--fade); transition-property: opacity; } .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); --pf-v6-c-accordion__toggle-icon--Rotate: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate); --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide); --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade); --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity); --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY); --pf-v6-c-accordion__item--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded--BorderWidth); --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide); --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade); --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity); --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY); --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd); --pf-v6-c-accordion__expandable-content--MaxHeight: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight); --pf-v6-c-accordion__expandable-content--Visibility: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility); --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: 0s; --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight); --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth); } .pf-v6-c-accordion__toggle { position: relative; z-index: var(--pf-v6-c-accordion__toggle--ZIndex); 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::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: var(--pf-v6-c-accordion__toggle--BorderWidth) solid var(--pf-v6-c-accordion__toggle--BorderColor); border-radius: inherit; } .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--BorderWidth: var(--pf-v6-c-accordion__toggle--hover--BorderWidth); } .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); transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate)); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon { scale: -1 1; } .pf-v6-c-accordion__expandable-content:where([hidden]) { display: revert; } .pf-v6-c-accordion__expandable-content { max-height: var(--pf-v6-c-accordion__expandable-content--MaxHeight); 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); visibility: var(--pf-v6-c-accordion__expandable-content--Visibility); background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor); border: var(--pf-v6-c-accordion__expandable-content--BorderWidth) solid var(--pf-v6-c-accordion__expandable-content--BorderColor); border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius); opacity: var(--pf-v6-c-accordion__expandable-content--Opacity); transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade); transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction); transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s; transition-property: opacity, translate, visibility, max-height, margin-block-end; translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY); } .pf-v6-c-accordion__expandable-content.pf-m-fixed { max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base); 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-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-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-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-outgoing--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: initial; --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short); --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short); --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short); --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short); --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: initial; --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short); --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition: all var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration) var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction) var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration); --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial; --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial; --pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-alert-group__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast); --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--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong); --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-