@volverjs/style/dist/components/vv-alert.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-background-color: var(--color-surface-2);--vv-alert-box-shadow: var(--shadow-lg);--vv-alert-border-color: var(--color-gray-lighten-4);--vv-alert-border-radius: var(--rounded);--vv-alert-border-style: solid;--vv-alert-border-width: var(--border);--vv-alert-display: flex;--vv-alert-flex-wrap: wrap;--vv-alert-align-items: center;--vv-alert-gap: var(--spacing-sm);--vv-alert-min-width: 0;--vv-alert-overflow: hidden;--vv-alert-padding: var(--spacing-sm);--vv-alert-element-header-display: flex;--vv-alert-element-header-align-items: center;--vv-alert-element-header-gap: var(--spacing-sm);--vv-alert-element-header-line-height: var(--leading-normal);--vv-alert-element-header-color: var(--color-word);--vv-alert-element-header-overflow: hidden;--vv-alert-element-header-text-overflow: ellipsis;--vv-alert-element-header-flex-shrink: 0;--vv-alert-element-title-min-width: 0;--vv-alert-element-title-font-weight: var(--font-bold);--vv-alert-element-title-overflow: hidden;--vv-alert-element-title-text-overflow: ellipsis;--vv-alert-element-content-line-height: var(--leading-normal);--vv-alert-element-content-color: var(--color-word-1);--vv-alert-element-content-text-overflow: ellipsis;--vv-alert-element-content-overflow: hidden;--vv-alert-element-footer-display: flex;--vv-alert-element-close-position: absolute;--vv-alert-element-close-right: var(--spacing-md);--vv-alert-element-close-inline-size: 1em;--vv-alert-element-close-block-size: 1em;--vv-alert-element-close-cursor: pointer;--vv-alert-element-close-background-image: var(--bg-close);--vv-alert-element-close-background-position: center;--vv-alert-element-close-background-size: 100% auto;--vv-alert-element-close-background-repeat: no-repeat;--vv-alert-element-close-align-self: center;--vv-alert-element-close-border-radius: var(--rounded);--vv-alert-element-icon-flex-shrink: 0;--vv-alert-element-close-mask-display: none;--vv-alert-element-close-mask-position: absolute;--vv-alert-element-close-mask-top: 0;--vv-alert-element-close-mask-width: 50%;--vv-alert-element-close-mask-height: 100%;--vv-alert-element-close-mask-left: 50%;--vv-alert-element-close-mask-background-color: var(--color-gray);--vv-alert-element-close-mask-z-index: var(--z-1);--vv-alert-modifier-success-border-color: var(--color-success-lighten-5);--vv-alert-modifier-success-background-color: var(--color-surface-success);--vv-alert-modifier-success-element-icon-color: var(--color-success-darken-1);--vv-alert-modifier-success-element-header-color: var(--color-success-darken-1);--vv-alert-modifier-danger-border-color: var(--color-danger-lighten-5);--vv-alert-modifier-danger-background-color: var(--color-surface-danger);--vv-alert-modifier-danger-element-icon-color: var(--color-danger);--vv-alert-modifier-danger-element-header-color: var(--color-danger);--vv-alert-modifier-warning-border-color: var(--color-warning-lighten-1);--vv-alert-modifier-warning-background-color: var(--color-surface-warning);--vv-alert-modifier-warning-element-icon-color: var(--color-warning-darken-5);--vv-alert-modifier-warning-element-header-color: var(--color-warning-darken-5);--vv-alert-modifier-info-border-color: var(--color-info-lighten-1);--vv-alert-modifier-info-background-color: var(--color-surface-info);--vv-alert-modifier-info-element-icon-color: var(--color-info-darken-5);--vv-alert-modifier-info-element-header-color: var(--color-info-darken-5);--vv-alert-modifier-accent-border-color: var(--color-accent-lighten-5);--vv-alert-modifier-accent-background-color: var(--color-surface-accent);--vv-alert-modifier-accent-element-icon-color: var(--color-accent);--vv-alert-modifier-accent-element-header-color: var(--color-accent);--vv-alert-modifier-brand-border-color: var(--color-brand-lighten-5);--vv-alert-modifier-brand-background-color: var(--color-surface-brand);--vv-alert-modifier-brand-element-icon-color: var(--color-brand-darken-3);--vv-alert-modifier-brand-element-header-color: var(--color-brand-darken-3);--vv-alert-modifier-dismissable-position: relative;--vv-alert-modifier-dismissable-padding-right: calc(var(--spacing-md) * 2 + 1em);--vv-alert-modifier-nowrap-breakpoint-sm-flex-wrap: nowrap;--vv-alert-modifier-nowrap-breakpoint-sm-white-space: nowrap;--vv-alert-modifier-notification-padding: var(--spacing-0);--vv-alert-modifier-notification-width: max(15dvw, min(20rem, 80dvw));--vv-alert-modifier-notification-border-color: var(--color-gray);--vv-alert-modifier-notification-flex-direction: column;--vv-alert-modifier-notification-align-items: normal;--vv-alert-modifier-notification-gap: var(--spacing-0);--vv-alert-modifier-notification-element-header-padding: var(--spacing-xs) var(--spacing-sm);--vv-alert-modifier-notification-element-header-background-color: var(--color-gray-darken-1);--vv-alert-modifier-notification-element-header-color: var(--color-white);--vv-alert-modifier-notification-element-title-font-weight: var(--font-normal);--vv-alert-modifier-notification-element-title-margin-right: auto;--vv-alert-modifier-notification-element-icon-color: var(--color-white);--vv-alert-modifier-notification-element-content-padding: var(--spacing-sm);--vv-alert-modifier-notification-element-content-font-size: var(--text-14);--vv-alert-modifier-notification-element-footer-padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);--vv-alert-modifier-notification-element-close-background-color: var(--color-surface-2);--vv-alert-modifier-notification-element-close-border-radius: var(--rounded);--vv-alert-modifier-notification-element-close-background-size: 70% auto;--vv-alert-modifier-notification-element-close-inline-size: 1.1em;--vv-alert-modifier-notification-element-close-block-size: 1.1em;--vv-alert-modifier-notification-modifier-dismissable-padding-right: 0;--vv-alert-modifier-notification-modifier-dismissable-element-header-position: relative;--vv-alert-modifier-notification-modifier-dismissable-element-header-padding-right: calc(var(--spacing-md) * 2 + 1em);--vv-alert-modifier-notification-modifier-success-border-color: var(--color-success);--vv-alert-modifier-notification-modifier-success-element-header-background-color: var(--color-success);--vv-alert-modifier-notification-modifier-danger-border-color: var(--color-danger);--vv-alert-modifier-notification-modifier-danger-element-header-background-color: var(--color-danger);--vv-alert-modifier-notification-modifier-warning-border-color: var(--color-warning-darken-5);--vv-alert-modifier-notification-modifier-warning-element-header-background-color: var(--color-warning-darken-5);--vv-alert-modifier-notification-modifier-info-border-color: var(--color-info-darken-5);--vv-alert-modifier-notification-modifier-info-element-header-background-color: var(--color-info-darken-5);--vv-alert-modifier-notification-modifier-accent-border-color: var(--color-accent);--vv-alert-modifier-notification-modifier-accent-element-header-background-color: var(--color-accent);--vv-alert-modifier-notification-modifier-brand-border-color: var(--color-brand);--vv-alert-modifier-notification-modifier-brand-element-header-background-color: var(--color-brand);--vv-alert-modifier-callout-box-shadow: none;--vv-alert-modifier-callout-border-radius: var(--rounded-none);--vv-alert-modifier-callout-border-width: 0 0 0 var(--spacing-4);--vv-alert-modifier-callout-flex-direction: column;--vv-alert-modifier-callout-align-items: normal;--vv-alert-modifier-callout-element-title-text-transform: uppercase;--vv-alert-modifier-callout-element-content-line-height: var(--leading-normal);--vv-alert-modifier-auto-close-element-close-background-color: var(--color-white);--vv-alert-modifier-auto-close-element-close-border: var(--border) solid var(--color-white);--vv-alert-modifier-auto-close-element-close-border-radius: 50%;--vv-alert-modifier-auto-close-element-close-overflow: hidden;--vv-alert-modifier-auto-close-element-close-opacity: var(--opacity-80);--vv-alert-modifier-auto-close-element-close-background-image: none;--vv-alert-modifier-auto-close-element-close-background-size: 70% auto;--vv-alert-modifier-auto-close-element-close-inline-size: 1.1em;--vv-alert-modifier-auto-close-element-close-block-size: 1.1em;--vv-alert-modifier-auto-close-element-close-pseudo-before-position: absolute;--vv-alert-modifier-auto-close-element-close-pseudo-before-top: 0;--vv-alert-modifier-auto-close-element-close-pseudo-before-width: 50%;--vv-alert-modifier-auto-close-element-close-pseudo-before-height: 100%;--vv-alert-modifier-auto-close-element-close-pseudo-before-transform-origin: 100% 50%;--vv-alert-modifier-auto-close-element-close-pseudo-before-background-color: var(--color-gray);--vv-alert-modifier-auto-close-element-close-pseudo-before-border-radius: 100% 0 0 100%/50% 0 0 50%;--vv-alert-modifier-auto-close-element-close-pseudo-after-position: absolute;--vv-alert-modifier-auto-close-element-close-pseudo-after-top: 0;--vv-alert-modifier-auto-close-element-close-pseudo-after-width: 50%;--vv-alert-modifier-auto-close-element-close-pseudo-after-height: 100%;--vv-alert-modifier-auto-close-element-close-pseudo-after-background-color: var(--color-white);--vv-alert-modifier-auto-close-element-close-pseudo-after-border-radius: 100% 0 0 100%/50% 0 0 50%;--vv-alert-modifier-auto-close-element-close-pseudo-after-opacity: var(--opacity-0);--vv-alert-modifier-auto-close-element-close-mask-display: block;--vv-alert-modifier-auto-close-state-hover-element-close-mask-opacity: var(--opacity-0);--vv-alert-modifier-auto-close-state-hover-element-close-mask-animation: none;--vv-alert-modifier-auto-close-state-hover-element-close-border-radius: var(--rounded);--vv-alert-modifier-auto-close-state-hover-element-close-background-image: var(--bg-close);--vv-alert-modifier-auto-close-state-hover-element-close-animation: none;--vv-alert-modifier-auto-close-state-hover-element-close-pseudo-before-opacity: var(--opacity-0);--vv-alert-modifier-auto-close-state-hover-element-close-pseudo-before-animation: none;--vv-alert-modifier-auto-close-state-hover-element-close-pseudo-after-opacity: var(--opacity-0);--vv-alert-modifier-auto-close-state-hover-element-close-pseudo-after-animation: none;--vv-alert-transition-fade-inline-end-active-transition: var(--transition-all);--vv-alert-transition-fade-inline-end-enter-from-opacity: var(--opacity-0);--vv-alert-transition-fade-inline-end-enter-from-translate: 100%;--vv-alert-transition-fade-inline-end-leave-to-opacity: var(--opacity-0);--vv-alert-transition-fade-inline-end-leave-to-translate: 100%;--vv-alert-transition-fade-inline-start-active-transition: var(--transition-all);--vv-alert-transition-fade-inline-start-enter-from-opacity: var(--opacity-0);--vv-alert-transition-fade-inline-start-enter-from-translate: -100%;--vv-alert-transition-fade-inline-start-leave-to-opacity: var(--opacity-0);--vv-alert-transition-fade-inline-start-leave-to-translate: -100%;--vv-alert-transition-fade-block-top-active-transition: var(--transition-all);--vv-alert-transition-fade-block-top-enter-from-opacity: var(--opacity-0);--vv-alert-transition-fade-block-top-enter-from-translate: 0 -100%;--vv-alert-transition-fade-block-top-leave-to-opacity: var(--opacity-0);--vv-alert-transition-fade-block-top-leave-to-translate: 0 -100%;--vv-alert-transition-fade-block-bottom-active-transition: var(--transition-all);--vv-alert-transition-fade-block-bottom-enter-from-opacity: var(--opacity-0);--vv-alert-transition-fade-block-bottom-enter-from-translate: 0 100%;--vv-alert-transition-fade-block-bottom-leave-to-opacity: var(--opacity-0);--vv-alert-transition-fade-block-bottom-leave-to-translate: 0 100%;--vv-alert-transition-fade-active-transition: var(--transition-opacity);--vv-alert-transition-fade-enter-from-opacity: var(--opacity-0);--vv-alert-transition-fade-leave-to-opacity: var(--opacity-0)}:where(.vv-alert){--alert-duration: 3s;background-color:var(--vv-alert-background-color);box-shadow:var(--vv-alert-box-shadow);border-color:var(--vv-alert-border-color);border-radius:var(--vv-alert-border-radius);border-style:var(--vv-alert-border-style);border-width:var(--vv-alert-border-width);display:var(--vv-alert-display);flex-wrap:var(--vv-alert-flex-wrap);align-items:var(--vv-alert-align-items);gap:var(--vv-alert-gap);min-width:var(--vv-alert-min-width);overflow:var(--vv-alert-overflow);padding:var(--vv-alert-padding)}:where(.vv-alert__header){display:var(--vv-alert-element-header-display);align-items:var(--vv-alert-element-header-align-items);gap:var(--vv-alert-element-header-gap);line-height:var(--vv-alert-element-header-line-height);color:var(--vv-alert-element-header-color);overflow:var(--vv-alert-element-header-overflow);text-overflow:var(--vv-alert-element-header-text-overflow);flex-shrink:var(--vv-alert-element-header-flex-shrink)}:where(.vv-alert__title){min-width:var(--vv-alert-element-title-min-width);font-weight:var(--vv-alert-element-title-font-weight);overflow:var(--vv-alert-element-title-overflow);text-overflow:var(--vv-alert-element-title-text-overflow)}:where(.vv-alert__content){line-height:var(--vv-alert-element-content-line-height);color:var(--vv-alert-element-content-color);text-overflow:var(--vv-alert-element-content-text-overflow);overflow:var(--vv-alert-element-content-overflow)}:where(.vv-alert__footer){display:var(--vv-alert-element-footer-display)}:where(.vv-alert__close){position:var(--vv-alert-element-close-position);right:var(--vv-alert-element-close-right);inline-size:var(--vv-alert-element-close-inline-size);block-size:var(--vv-alert-element-close-block-size);cursor:var(--vv-alert-element-close-cursor);background-image:var(--vv-alert-element-close-background-image);background-position:var(--vv-alert-element-close-background-position);background-size:var(--vv-alert-element-close-background-size);background-repeat:var(--vv-alert-element-close-background-repeat);align-self:var(--vv-alert-element-close-align-self);border-radius:var(--vv-alert-element-close-border-radius)}:where(.vv-alert__icon){flex-shrink:var(--vv-alert-element-icon-flex-shrink)}:where(.vv-alert__close-mask){display:var(--vv-alert-element-close-mask-display);position:var(--vv-alert-element-close-mask-position);top:var(--vv-alert-element-close-mask-top);width:var(--vv-alert-element-close-mask-width);height:var(--vv-alert-element-close-mask-height);left:var(--vv-alert-element-close-mask-left);background-color:var(--vv-alert-element-close-mask-background-color);animation:pie-masks var(--alert-duration) steps(1,end) reverse;z-index:var(--vv-alert-element-close-mask-z-index)}:where(.vv-alert--success.vv-alert){--vv-alert-border-color: var(--vv-alert-modifier-success-border-color);--vv-alert-background-color: var(--vv-alert-modifier-success-background-color)}:where(.vv-alert--success .vv-alert__icon){color:var(--vv-alert-modifier-success-element-icon-color)}:where(.vv-alert--success .vv-alert__header){color:var(--vv-alert-modifier-success-element-header-color)}:where(.vv-alert--danger.vv-alert){--vv-alert-border-color: var(--vv-alert-modifier-danger-border-color);--vv-alert-background-color: var(--vv-alert-modifier-danger-background-color)}:where(.vv-alert--danger .vv-alert__icon){color:var(--vv-alert-modifier-danger-element-icon-color)}:where(.vv-alert--danger .vv-alert__header){color:var(--vv-alert-modifier-danger-element-header-color)}:where(.vv-alert--warning.vv-alert){--vv-alert-border-color: var(--vv-alert-modifier-warning-border-color);--vv-alert-background-color: var(--vv-alert-modifier-warning-background-color)}:where(.vv-alert--warning .vv-alert__icon){color:var(--vv-alert-modifier-warning-element-icon-color)}:where(.vv-alert--warning .vv-alert__header){color:var(--vv-alert-modifier-warning-element-header-color)}:where(.vv-alert--info.vv-alert){--vv-alert-border-color: var(--vv-alert-modifier-info-border-color);--vv-alert-background-color: var(--vv-alert-modifier-info-background-color)}:where(.vv-alert--info .vv-alert__icon){color:var(--vv-alert-modifier-info-element-icon-color)}:where(.vv-alert--info .vv-alert__header){color:var(--vv-alert-modifier-info-element-header-color)}:where(.vv-alert--accent.vv-alert){--vv-alert-border-color: var(--vv-alert-modifier-accent-border-color);--vv-alert-background-color: var(--vv-alert-modifier-accent-background-color)}:where(.vv-alert--accent .vv-alert__icon){color:var(--vv-alert-modifier-accent-element-icon-color)}:where(.vv-alert--accent .vv-alert__header){color:var(--vv-alert-modifier-accent-element-header-color)}:where(.vv-alert--brand.vv-alert){--vv-alert-border-color: var(--vv-alert-modifier-brand-border-color);--vv-alert-background-color: var(--vv-alert-modifier-brand-background-color)}:where(.vv-alert--brand .vv-alert__icon){color:var(--vv-alert-modifier-brand-element-icon-color)}:where(.vv-alert--brand .vv-alert__header){color:var(--vv-alert-modifier-brand-element-header-color)}:where(.vv-alert--dismissable.vv-alert){position:var(--vv-alert-modifier-dismissable-position);padding-right:var(--vv-alert-modifier-dismissable-padding-right)}@media (min-width: 576px){:where(.vv-alert--nowrap.vv-alert){flex-wrap:var(--vv-alert-modifier-nowrap-breakpoint-sm-flex-wrap);white-space:var(--vv-alert-modifier-nowrap-breakpoint-sm-white-space)}}:where(.vv-alert--notification.vv-alert){--vv-alert-padding: var(--vv-alert-modifier-notification-padding);width:var(--vv-alert-modifier-notification-width);--vv-alert-border-color: var(--vv-alert-modifier-notification-border-color);flex-direction:var(--vv-alert-modifier-notification-flex-direction);--vv-alert-align-items: var(--vv-alert-modifier-notification-align-items);--vv-alert-gap: var(--vv-alert-modifier-notification-gap)}:where(.vv-alert--notification .vv-alert__header){padding:var(--vv-alert-modifier-notification-element-header-padding);background-color:var(--vv-alert-modifier-notification-element-header-background-color);color:var(--vv-alert-modifier-notification-element-header-color)}:where(.vv-alert--notification .vv-alert__title){font-weight:var(--vv-alert-modifier-notification-element-title-font-weight);margin-right:var(--vv-alert-modifier-notification-element-title-margin-right)}:where(.vv-alert--notification .vv-alert__icon){color:var(--vv-alert-modifier-notification-element-icon-color)}:where(.vv-alert--notification .vv-alert__content){padding:var(--vv-alert-modifier-notification-element-content-padding);font-size:var(--vv-alert-modifier-notification-element-content-font-size)}:where(.vv-alert--notification .vv-alert__footer){padding:var(--vv-alert-modifier-notification-element-footer-padding)}:where(.vv-alert--notification .vv-alert__close){background-color:var(--vv-alert-modifier-notification-element-close-background-color);border-radius:var(--vv-alert-modifier-notification-element-close-border-radius);background-size:var(--vv-alert-modifier-notification-element-close-background-size);inline-size:var(--vv-alert-modifier-notification-element-close-inline-size);block-size:var(--vv-alert-modifier-notification-element-close-block-size)}:where(.vv-alert--notification.vv-alert--dismissable.vv-alert){padding-right:var(--vv-alert-modifier-notification-modifier-dismissable-padding-right)}:where(.vv-alert--notification.vv-alert--dismissable .vv-alert__header){position:var(--vv-alert-modifier-notification-modifier-dismissable-element-header-position);padding-right:var(--vv-alert-modifier-notification-modifier-dismissable-element-header-padding-right)}:where(.vv-alert--notification.vv-alert--success.vv-alert){--vv-alert-modifier-notification-border-color: var(--vv-alert-modifier-notification-modifier-success-border-color)}:where(.vv-alert--notification.vv-alert--success .vv-alert__header){background-color:var(--vv-alert-modifier-notification-modifier-success-element-header-background-color)}:where(.vv-alert--notification.vv-alert--danger.vv-alert){--vv-alert-modifier-notification-border-color: var(--vv-alert-modifier-notification-modifier-danger-border-color)}:where(.vv-alert--notification.vv-alert--danger .vv-alert__header){background-color:var(--vv-alert-modifier-notification-modifier-danger-element-header-background-color)}:where(.vv-alert--notification.vv-alert--warning.vv-alert){--vv-alert-modifier-notification-border-color: var(--vv-alert-modifier-notification-modifier-warning-border-color)}:where(.vv-alert--notification.vv-alert--warning .vv-alert__header){background-color:var(--vv-alert-modifier-notification-modifier-warning-element-header-background-color)}:where(.vv-alert--notification.vv-alert--info.vv-alert){--vv-alert-modifier-notification-border-color: var(--vv-alert-modifier-notification-modifier-info-border-color)}:where(.vv-alert--notification.vv-alert--info .vv-alert__header){background-color:var(--vv-alert-modifier-notification-modifier-info-element-header-background-color)}:where(.vv-alert--notification.vv-alert--accent.vv-alert){--vv-alert-modifier-notification-border-color: var(--vv-alert-modifier-notification-modifier-accent-border-color)}:where(.vv-alert--notification.vv-alert--accent .vv-alert__header){background-color:var(--vv-alert-modifier-notification-modifier-accent-element-header-background-color)}:where(.vv-alert--notification.vv-alert--brand.vv-alert){--vv-alert-modifier-notification-border-color: var(--vv-alert-modifier-notification-modifier-brand-border-color)}:where(.vv-alert--notification.vv-alert--brand .vv-alert__header){background-color:var(--vv-alert-modifier-notification-modifier-brand-element-header-background-color)}:where(.vv-alert--callout.vv-alert){--vv-alert-box-shadow: var(--vv-alert-modifier-callout-box-shadow);--vv-alert-border-radius: var(--vv-alert-modifier-callout-border-radius);--vv-alert-border-width: var(--vv-alert-modifier-callout-border-width);flex-direction:var(--vv-alert-modifier-callout-flex-direction);--vv-alert-align-items: var(--vv-alert-modifier-callout-align-items)}:where(.vv-alert--callout .vv-alert__title){text-transform:var(--vv-alert-modifier-callout-element-title-text-transform)}:where(.vv-alert--callout .vv-alert__content){line-height:var(--vv-alert-modifier-callout-element-content-line-height)}:where(.vv-alert--auto-close .vv-alert__close){background-color:var(--vv-alert-modifier-auto-close-element-close-background-color);border:var(--vv-alert-modifier-auto-close-element-close-border);border-radius:var(--vv-alert-modifier-auto-close-element-close-border-radius);overflow:var(--vv-alert-modifier-auto-close-element-close-overflow);opacity:var(--vv-alert-modifier-auto-close-element-close-opacity);background-image:var(--vv-alert-modifier-auto-close-element-close-background-image);background-size:var(--vv-alert-modifier-auto-close-element-close-background-size);inline-size:var(--vv-alert-modifier-auto-close-element-close-inline-size);block-size:var(--vv-alert-modifier-auto-close-element-close-block-size);animation:fade-out var(--alert-duration) forwards}:where(.vv-alert--auto-close .vv-alert__close):before{content:"";position:var(--vv-alert-modifier-auto-close-element-close-pseudo-before-position);top:var(--vv-alert-modifier-auto-close-element-close-pseudo-before-top);width:var(--vv-alert-modifier-auto-close-element-close-pseudo-before-width);height:var(--vv-alert-modifier-auto-close-element-close-pseudo-before-height);transform-origin:var(--vv-alert-modifier-auto-close-element-close-pseudo-before-transform-origin);background-color:var(--vv-alert-modifier-auto-close-element-close-pseudo-before-background-color);border-radius:var(--vv-alert-modifier-auto-close-element-close-pseudo-before-border-radius);animation:spin var(--alert-duration) linear}:where(.vv-alert--auto-close .vv-alert__close):after{content:"";position:var(--vv-alert-modifier-auto-close-element-close-pseudo-after-position);top:var(--vv-alert-modifier-auto-close-element-close-pseudo-after-top);width:var(--vv-alert-modifier-auto-close-element-close-pseudo-after-width);height:var(--vv-alert-modifier-auto-close-element-close-pseudo-after-height);background-color:var(--vv-alert-modifier-auto-close-element-close-pseudo-after-background-color);border-radius:var(--vv-alert-modifier-auto-close-element-close-pseudo-after-border-radius);animation:pie-masks var(--alert-duration) steps(1,end);opacity:var(--vv-alert-modifier-auto-close-element-close-pseudo-after-opacity)}:where(.vv-alert--auto-close .vv-alert__close-mask){display:var(--vv-alert-modifier-auto-close-element-close-mask-display)}:where(.vv-alert--auto-close.vv-alert--hover .vv-alert__close-mask,.vv-alert--auto-close.vv-alert.hover .vv-alert__close-mask,.vv-alert--auto-close.vv-alert:not([disabled]):hover .vv-alert__close-mask){opacity:var(--vv-alert-modifier-auto-close-state-hover-element-close-mask-opacity);animation:var(--vv-alert-modifier-auto-close-state-hover-element-close-mask-animation)}:where(.vv-alert--auto-close.vv-alert--hover .vv-alert__close,.vv-alert--auto-close.vv-alert.hover .vv-alert__close,.vv-alert--auto-close.vv-alert:not([disabled]):hover .vv-alert__close){border-radius:var(--vv-alert-modifier-auto-close-state-hover-element-close-border-radius);background-image:var(--vv-alert-modifier-auto-close-state-hover-element-close-background-image);animation:var(--vv-alert-modifier-auto-close-state-hover-element-close-animation)}:where(.vv-alert--auto-close.vv-alert--hover .vv-alert__close,.vv-alert--auto-close.vv-alert.hover .vv-alert__close,.vv-alert--auto-close.vv-alert:not([disabled]):hover .vv-alert__close):before{content:"";opacity:var(--vv-alert-modifier-auto-close-state-hover-element-close-pseudo-before-opacity);animation:var(--vv-alert-modifier-auto-close-state-hover-element-close-pseudo-before-animation)}:where(.vv-alert--auto-close.vv-alert--hover .vv-alert__close,.vv-alert--auto-close.vv-alert.hover .vv-alert__close,.vv-alert--auto-close.vv-alert:not([disabled]):hover .vv-alert__close):after{content:"";opacity:var(--vv-alert-modifier-auto-close-state-hover-element-close-pseudo-after-opacity);animation:var(--vv-alert-modifier-auto-close-state-hover-element-close-pseudo-after-animation)}:where(.vv-alert--fade-inline-end-enter-active,.vv-alert--fade-inline-end-leave-active){transition:var(--vv-alert-transition-fade-inline-end-active-transition)}:where(.vv-alert--fade-inline-end-enter-from){opacity:var(--vv-alert-transition-fade-inline-end-enter-from-opacity);translate:var(--vv-alert-transition-fade-inline-end-enter-from-translate)}:where(.vv-alert--fade-inline-end-leave-to){opacity:var(--vv-alert-transition-fade-inline-end-leave-to-opacity);translate:var(--vv-alert-transition-fade-inline-end-leave-to-translate)}:where(.vv-alert--fade-inline-start-enter-active,.vv-alert--fade-inline-start-leave-active){transition:var(--vv-alert-transition-fade-inline-start-active-transition)}:where(.vv-alert--fade-inline-start-enter-from){opacity:var(--vv-alert-transition-fade-inline-start-enter-from-opacity);translate:var(--vv-alert-transition-fade-inline-start-enter-from-translate)}:where(.vv-alert--fade-inline-start-leave-to){opacity:var(--vv-alert-transition-fade-inline-start-leave-to-opacity);translate:var(--vv-alert-transition-fade-inline-start-leave-to-translate)}:where(.vv-alert--fade-block-top-enter-active,.vv-alert--fade-block-top-leave-active){transition:var(--vv-alert-transition-fade-block-top-active-transition)}:where(.vv-alert--fade-block-top-enter-from){opacity:var(--vv-alert-transition-fade-block-top-enter-from-opacity);translate:var(--vv-alert-transition-fade-block-top-enter-from-translate)}:where(.vv-alert--fade-block-top-leave-to){opacity:var(--vv-alert-transition-fade-block-top-leave-to-opacity);translate:var(--vv-alert-transition-fade-block-top-leave-to-translate)}:where(.vv-alert--fade-block-bottom-enter-active,.vv-alert--fade-block-bottom-leave-active){transition:var(--vv-alert-transition-fade-block-bottom-active-transition)}:where(.vv-alert--fade-block-bottom-enter-from){opacity:var(--vv-alert-transition-fade-block-bottom-enter-from-opacity);translate:var(--vv-alert-transition-fade-block-bottom-enter-from-translate)}:where(.vv-alert--fade-block-bottom-leave-to){opacity:var(--vv-alert-transition-fade-block-bottom-leave-to-opacity);translate:var(--vv-alert-transition-fade-block-bottom-leave-to-translate)}:where(.vv-alert--fade-enter-active,.vv-alert--fade-leave-active){transition:var(--vv-alert-transition-fade-active-transition)}:where(.vv-alert--fade-enter-from){opacity:var(--vv-alert-transition-fade-enter-from-opacity)}:where(.vv-alert--fade-leave-to){opacity:var(--vv-alert-transition-fade-leave-to-opacity)}