.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__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-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s; transform: translateX(0) translateY(0); } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-alert-group__item { transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s; } .pf-v6-c-alert-group__item .pf-v6-c-alert { transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate); } } .pf-v6-c-alert-group__item.pf-m-offstage-top { grid-template-rows: 0fr; margin-block: 0; overflow: hidden; opacity: 0; transform: translateY(-100%); } .pf-v6-c-alert-group__item.pf-m-offstage-top .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: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s; transform: translateX(100%); } .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; } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-alert-group__item.pf-m-offstage-right { transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short); } .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert { transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short); } } .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); }