@layer components.notification{:host{position:fixed;bottom:var(--s-1, 1rem);left:var(--s-1, 1rem);z-index:9999;display:flex;flex-direction:column;gap:var(--s-2, 0.5rem);max-width:400px;pointer-events:none}e-notifications{display:flex;flex-direction:column;gap:var(--s-2, 0.5rem)}e-notification{display:flex;align-items:flex-start;gap:var(--s-2, 0.5rem);padding:var(--s-1, 0.75rem) var(--s0, 1rem);border-radius:var(--border-radius, 4px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);pointer-events:auto;background-color:var(--color-background, #fff);border:1px solid var(--color-border, #e0e0e0);opacity:1;transform:translateX(0)}e-notification[type=success]{background-color:var(--color-success-bg, #e8f5e9);border-color:var(--color-success, #4caf50);color:var(--color-success, #2e7d32)}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{flex:1;font-size:var(--s0, 1rem);line-height:1.4}e-notification-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer;opacity:.6;border-radius:50%;transition:opacity .2s,background-color .2s}e-notification-close:hover{opacity:1;background-color:rgba(0, 0, 0, 0.1)}@media(prefers-reduced-motion: no-preference){e-notification{animation:notification-slide-in .3s ease-out}e-notification[removing]{animation:notification-slide-out .3s ease-in forwards}@keyframes notification-slide-in{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes notification-slide-out{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}}}/*# sourceMappingURL=notification.css.map */