@volverjs/style/dist/components/vv-alert-group.css

@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.

:where(:host,:root,.theme){--vv-alert-group-position:relative;--vv-alert-group-z-index:var(--z-notification-alert);--vv-alert-group-display:flex;--vv-alert-group-flex-direction:column;--vv-alert-group-gap:var(--spacing-sm);--vv-alert-group-overflow:hidden;--vv-alert-group-pointer-events:none;--vv-alert-group-element-list-display:flex;--vv-alert-group-element-list-flex-direction:column;--vv-alert-group-element-list-gap:var(--spacing-xs);--vv-alert-group-element-list-state-empty-display:none;--vv-alert-group-element-item-transition:var(--transition-all);--vv-alert-group-element-item-flex-shrink:0;--vv-alert-group-element-item-pointer-events:auto;--vv-alert-group-modifier-fixed-position:fixed;--vv-alert-group-modifier-fixed-padding:var(--spacing-lg);--vv-alert-group-modifier-fixed-max-width:var(--w-full);--vv-alert-group-modifier-fixed-max-height:var(--h-full);--vv-alert-group-modifier-absolute-position:absolute;--vv-alert-group-modifier-absolute-padding:var(--spacing-lg);--vv-alert-group-modifier-absolute-max-width:var(--w-full);--vv-alert-group-modifier-absolute-max-height:var(--h-full);--vv-alert-group-modifier-reverse-flex-direction:column-reverse;--vv-alert-group-modifier-reverse-element-list-flex-direction:column-reverse;--vv-alert-group-modifier-top-start-inset-block:0 auto;--vv-alert-group-modifier-top-start-inset-inline:0 auto;--vv-alert-group-modifier-top-middle-inset-block:0 auto;--vv-alert-group-modifier-top-middle-inset-inline:50% auto;--vv-alert-group-modifier-top-middle-translate:-50%;--vv-alert-group-modifier-top-end-inset-block:0 auto;--vv-alert-group-modifier-top-end-inset-inline:auto 0;--vv-alert-group-modifier-center-start-inset-block:50% auto;--vv-alert-group-modifier-center-start-translate:0 -50%;--vv-alert-group-modifier-center-start-inset-inline:0 auto;--vv-alert-group-modifier-center-middle-inset-block:50% auto;--vv-alert-group-modifier-center-middle-inset-inline:50% auto;--vv-alert-group-modifier-center-middle-translate:-50% -50%;--vv-alert-group-modifier-center-end-inset-block:50% auto;--vv-alert-group-modifier-center-end-inset-inline:auto 0;--vv-alert-group-modifier-center-end-translate:0 -50%;--vv-alert-group-modifier-bottom-start-inset-block:auto 0;--vv-alert-group-modifier-bottom-start-inset-inline:0 auto;--vv-alert-group-modifier-bottom-middle-inset-block:auto 0;--vv-alert-group-modifier-bottom-middle-inset-inline:50% auto;--vv-alert-group-modifier-bottom-middle-translate:-50%;--vv-alert-group-modifier-bottom-end-inset-block:auto 0;--vv-alert-group-modifier-bottom-end-inset-inline:auto 0;--vv-alert-group-modifier-full-bleed-width:max(15dvw, min(20rem, 80dvw));--vv-alert-group-modifier-stack-element-item-flex-wrap:nowrap;--vv-alert-group-modifier-stack-element-item-white-space:nowrap;--vv-alert-group-modifier-stack-element-nth-1-z-index:var(--z-notification-alert);--vv-alert-group-modifier-stack-element-not-first-filter:grayscale(100%);--vv-alert-group-modifier-stack-element-nth-other-opacity:0;--vv-alert-group-modifier-stack-state-hover-element-not-first-translate:0;--vv-alert-group-modifier-stack-state-hover-element-not-first-scale:1;--vv-alert-group-modifier-stack-state-hover-element-not-first-filter:none;--vv-alert-group-modifier-stack-modifier-reverse-state-hover-element-not-first-translate:0;--vv-alert-group-modifier-stack-modifier-reverse-state-hover-element-not-first-scale:1}:where(.vv-alert-group){position:var(--vv-alert-group-position);z-index:var(--vv-alert-group-z-index);display:var(--vv-alert-group-display);flex-direction:var(--vv-alert-group-flex-direction);gap:var(--vv-alert-group-gap);overflow:var(--vv-alert-group-overflow);pointer-events:var(--vv-alert-group-pointer-events)}:where(.vv-alert-group__list,.vv-alert-group>[role=group]){display:var(--vv-alert-group-element-list-display);flex-direction:var(--vv-alert-group-element-list-flex-direction);gap:var(--vv-alert-group-element-list-gap)}:where(.vv-alert-group__list--empty,.vv-alert-group__list.empty,.vv-alert-group>[role=group].empty,.vv-alert-group__list:not([disabled]):empty,.vv-alert-group>[role=group]:not([disabled]):empty){--vv-alert-group-element-list-display:var(--vv-alert-group-element-list-state-empty-display)}:where(.vv-alert-group__item,.vv-alert-group>[role=group]>*){transition:var(--vv-alert-group-element-item-transition);flex-shrink:var(--vv-alert-group-element-item-flex-shrink);pointer-events:var(--vv-alert-group-element-item-pointer-events)}:where(.vv-alert-group__nth-1,.vv-alert-group>[role=group]>:first-child){--alert-counter:1}:where(.vv-alert-group__nth-2,.vv-alert-group>[role=group]>:nth-child(2)){--alert-counter:2}:where(.vv-alert-group__nth-3,.vv-alert-group>[role=group]>:nth-child(3)){--alert-counter:3}:where(.vv-alert-group__nth-4,.vv-alert-group>[role=group]>:nth-child(4)){--alert-counter:4}:where(.vv-alert-group__nth-5,.vv-alert-group>[role=group]>:nth-child(5)){--alert-counter:5}:where(.vv-alert-group--fixed.vv-alert-group){--vv-alert-group-position:var(--vv-alert-group-modifier-fixed-position);padding:var(--vv-alert-group-modifier-fixed-padding);max-width:var(--vv-alert-group-modifier-fixed-max-width);max-height:var(--vv-alert-group-modifier-fixed-max-height)}:where(.vv-alert-group--absolute.vv-alert-group){--vv-alert-group-position:var(--vv-alert-group-modifier-absolute-position);padding:var(--vv-alert-group-modifier-absolute-padding);max-width:var(--vv-alert-group-modifier-absolute-max-width);max-height:var(--vv-alert-group-modifier-absolute-max-height)}:where(.vv-alert-group--reverse.vv-alert-group){--vv-alert-group-flex-direction:var(--vv-alert-group-modifier-reverse-flex-direction)}:where(.vv-alert-group--reverse>.vv-alert-group__list,.vv-alert-group--reverse>[role=group]){flex-direction:var(--vv-alert-group-modifier-reverse-element-list-flex-direction)}:where(.vv-alert-group--top-start.vv-alert-group){inset-block:var(--vv-alert-group-modifier-top-start-inset-block);inset-inline:var(--vv-alert-group-modifier-top-start-inset-inline)}:where(.vv-alert-group--top-middle.vv-alert-group){inset-block:var(--vv-alert-group-modifier-top-middle-inset-block);inset-inline:var(--vv-alert-group-modifier-top-middle-inset-inline);translate:var(--vv-alert-group-modifier-top-middle-translate)}:where(.vv-alert-group--top-end.vv-alert-group){inset-block:var(--vv-alert-group-modifier-top-end-inset-block);inset-inline:var(--vv-alert-group-modifier-top-end-inset-inline)}:where(.vv-alert-group--center-start.vv-alert-group){inset-block:var(--vv-alert-group-modifier-center-start-inset-block);translate:var(--vv-alert-group-modifier-center-start-translate);inset-inline:var(--vv-alert-group-modifier-center-start-inset-inline)}:where(.vv-alert-group--center-middle.vv-alert-group){inset-block:var(--vv-alert-group-modifier-center-middle-inset-block);inset-inline:var(--vv-alert-group-modifier-center-middle-inset-inline);translate:var(--vv-alert-group-modifier-center-middle-translate)}:where(.vv-alert-group--center-end.vv-alert-group){inset-block:var(--vv-alert-group-modifier-center-end-inset-block);inset-inline:var(--vv-alert-group-modifier-center-end-inset-inline);translate:var(--vv-alert-group-modifier-center-end-translate)}:where(.vv-alert-group--bottom-start.vv-alert-group){inset-block:var(--vv-alert-group-modifier-bottom-start-inset-block);inset-inline:var(--vv-alert-group-modifier-bottom-start-inset-inline)}:where(.vv-alert-group--bottom-middle.vv-alert-group){inset-block:var(--vv-alert-group-modifier-bottom-middle-inset-block);inset-inline:var(--vv-alert-group-modifier-bottom-middle-inset-inline);translate:var(--vv-alert-group-modifier-bottom-middle-translate)}:where(.vv-alert-group--bottom-end.vv-alert-group){inset-block:var(--vv-alert-group-modifier-bottom-end-inset-block);inset-inline:var(--vv-alert-group-modifier-bottom-end-inset-inline)}:where(.vv-alert-group--full-bleed.vv-alert-group){width:var(--vv-alert-group-modifier-full-bleed-width)}:where(.vv-alert-group--stack .vv-alert-group__item,.vv-alert-group--stack>[role=group]>*){flex-wrap:var(--vv-alert-group-modifier-stack-element-item-flex-wrap);white-space:var(--vv-alert-group-modifier-stack-element-item-white-space)}:where(.vv-alert-group--stack .vv-alert-group__nth-1,.vv-alert-group--stack>[role=group]>:first-child){z-index:var(--vv-alert-group-modifier-stack-element-nth-1-z-index)}:where(.vv-alert-group--stack .vv-alert-group__not-first,.vv-alert-group--stack>[role=group]>:not(:first-child)){translate:0 calc(-100% * (var(--alert-counter,1) - 1));scale:calc(1 - .05 * (var(--alert-counter,1) - 1));z-index:calc(var(--z-notification-alert) - var(--alert-counter,1));filter:var(--vv-alert-group-modifier-stack-element-not-first-filter)}:where(.vv-alert-group--stack .vv-alert-group__nth-other,.vv-alert-group--stack>[role=group]>:nth-child(n+6)){opacity:var(--vv-alert-group-modifier-stack-element-nth-other-opacity)}:where(.vv-alert-group--stack.vv-alert-group--hover .vv-alert-group__not-first,.vv-alert-group--stack.vv-alert-group.hover .vv-alert-group__not-first,.vv-alert-group--stack.vv-alert-group:not([disabled]):hover .vv-alert-group__not-first,.vv-alert-group--stack.vv-alert-group--hover>[role=group]>:not(:first-child),.vv-alert-group--stack.vv-alert-group.hover>[role=group]>:not(:first-child),.vv-alert-group--stack.vv-alert-group:not([disabled]):hover>[role=group]>:not(:first-child)){translate:var(--vv-alert-group-modifier-stack-state-hover-element-not-first-translate);scale:var(--vv-alert-group-modifier-stack-state-hover-element-not-first-scale);filter:var(--vv-alert-group-modifier-stack-state-hover-element-not-first-filter)}:where(.vv-alert-group--stack.vv-alert-group--reverse .vv-alert-group__not-first,.vv-alert-group--stack.vv-alert-group--reverse>[role=group]>:not(:first-child)){translate:0 calc(100% * (var(--alert-counter,1) - 1));scale:calc(1 - .05 * (var(--alert-counter,1) - 1))}:where(.vv-alert-group--stack.vv-alert-group--reverse.vv-alert-group--hover .vv-alert-group__not-first,.vv-alert-group--stack.vv-alert-group--reverse.vv-alert-group.hover .vv-alert-group__not-first,.vv-alert-group--stack.vv-alert-group--reverse.vv-alert-group:not([disabled]):hover .vv-alert-group__not-first,.vv-alert-group--stack.vv-alert-group--reverse.vv-alert-group--hover>[role=group]>:not(:first-child),.vv-alert-group--stack.vv-alert-group--reverse.vv-alert-group.hover>[role=group]>:not(:first-child),.vv-alert-group--stack.vv-alert-group--reverse.vv-alert-group:not([disabled]):hover>[role=group]>:not(:first-child)){translate:var(--vv-alert-group-modifier-stack-modifier-reverse-state-hover-element-not-first-translate);scale:var(--vv-alert-group-modifier-stack-modifier-reverse-state-hover-element-not-first-scale)}