.notification{--notification-tint:var(--vena-colors-background-bg-brand-primary);--notification-accent:var(--vena-component-colors-utility-brand-utility-brand-500);inline-size:var(--width,var(--vena-width-sm));border:1px solid var(--vena-colors-border-border-secondary);border-radius:var(--vena-radius-xl);background:linear-gradient(to bottom, var(--vena-colors-background-bg-primary) 25%, var(--notification-tint));max-inline-size:100%;box-shadow:var(--shadow-lg);color:var(--vena-colors-text-text-primary-900);font-family:var(--font-body);font-size:var(--vena-font-size-text-sm);line-height:var(--vena-line-height-text-sm);text-align:start;position:relative;overflow:hidden}.notification[data-color=gray]{--notification-tint:var(--vena-colors-background-bg-secondary);--notification-accent:var(--vena-component-colors-utility-neutral-utility-neutral-500)}.notification[data-color=success]{--notification-tint:var(--vena-colors-background-bg-success-primary);--notification-accent:var(--vena-component-colors-utility-green-utility-green-500)}.notification[data-color=warning]{--notification-tint:var(--vena-colors-background-bg-warning-primary);--notification-accent:var(--vena-component-colors-utility-yellow-utility-yellow-500)}.notification[data-color=error]{--notification-tint:var(--vena-colors-background-bg-error-primary);--notification-accent:var(--vena-component-colors-utility-red-utility-red-500)}.notification__body{align-items:flex-start;gap:var(--vena-spacing-lg);padding:calc(var(--vena-spacing-xl) + var(--vena-spacing-xs) / 2) var(--vena-spacing-xl) var(--vena-spacing-xl);display:flex}.notification__content{gap:calc(var(--vena-spacing-xs) / 2);flex-direction:column;flex:1;min-inline-size:0;display:flex}.notification__heading{justify-content:space-between;align-items:center;gap:var(--vena-spacing-md);min-block-size:calc(var(--vena-spacing-xl) * 2);display:flex}.notification__title{font-weight:var(--vena-font-weight-semibold);overflow-wrap:anywhere}.notification__description{color:var(--vena-colors-text-text-tertiary-600);overflow-wrap:anywhere;padding-inline-end:calc(var(--vena-spacing-xl) * 2 + var(--vena-spacing-lg))}.notification__actions{gap:var(--vena-spacing-lg);flex-wrap:wrap;margin-block-start:var(--vena-spacing-md);display:flex}.notification__timer{inline-size:100%;block-size:calc(var(--vena-spacing-xs) / 2);border-radius:var(--vena-radius-full);background:var(--notification-accent);transform-origin:0;position:absolute;inset-block-start:0;inset-inline-start:0}.notification:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .notification__timer{transform-origin:100%}.notification__timer[data-timed]{animation:notification-countdown var(--notification-duration) linear forwards}.notification[data-paused] .notification__timer{animation-play-state:paused}@keyframes notification-countdown{to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){.notification__timer[data-timed]{animation:none}}