@layer components.notification{:host{top:var(--s-1,1rem);z-index:var(--z-index-tooltip,9999);pointer-events:none;position:fixed;inset-inline:0}e-notifications{gap:var(--s-2,.5rem);max-width:400px;padding-inline:var(--s-1,1rem);flex-direction:column;margin-inline:auto;display:flex}e-notification{align-items:flex-start;gap:var(--s-2,.5rem);padding:var(--s-1,.75rem) var(--s0,1rem);border-radius:var(--border-radius,4px);pointer-events:auto;background-color:var(--color-background,#fff);border:1px solid var(--color-border,#e0e0e0);opacity:1;display:flex;transform:translateY(0);box-shadow:0 4px 12px #00000026}e-notification[type=success]{background-color:color-mix(in srgb, var(--color-primary) 20%, var(--color-background,#fff));border-color:var(--color-primary);color:var(--color-primary)}e-notification[type=error]{background-color:var(--color-error-bg,#ffebee);border-color:var(--color-error,#f44336);color:var(--color-error,#c62828)}e-notification[type=warning]{background-color:var(--color-warning-bg,#fff8e1);border-color:var(--color-warning,#ff9800);color:var(--color-warning-dark,#e65100)}e-notification[type=info]{background-color:var(--color-info-bg,#e3f2fd);border-color:var(--color-info,#2196f3);color:var(--color-info,#1565c0)}e-notification[removing]{opacity:0}e-notification-content{min-width:0;font-size:var(--s0,1rem);word-wrap:break-word;overflow-wrap:break-word;flex-direction:column;flex:1;gap:.25rem;line-height:1.4;display:flex}e-notification-message{display:block}e-notification-trace,e-notification-request-id{opacity:.8;font-size:.8em;font-family:var(--font-mono,monospace);word-break:break-all;display:block}button[data-role=close]{appearance:none;font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;padding:0;display:flex}button[data-role=close]:hover{opacity:1}button[data-role=close]:focus-visible{outline-offset:2px;outline:2px solid}@media (prefers-reduced-motion:no-preference){button[data-role=close] ec-fa-icon{transition:transform .15s ease-out}button[data-role=close]:hover ec-fa-icon{transform:scale(1.2)}e-notification{animation:.3s ease-out notification-slide-in}e-notification[removing]{animation:.3s ease-in forwards notification-slide-out}@keyframes notification-slide-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes notification-slide-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}}}