/** * Photon Grid base styles — toast-notifications section. * * Concatenated (in order) by base-styles.ts; edit here, not there. Order is * preserved because CSS cascade depends on it. * * Every value is a theme variable (with a sensible fallback) so toasts re-theme * with the rest of the grid — light, dark and custom themes — with zero inline * styles (only the gap and progress-duration custom properties are set from JS). * The layer is `pointer-events: none` so it never blocks the app; each toast * re-enables pointer events for its own controls. */ export declare const toastCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Toast Notifications \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-toast-layer {\n position: fixed;\n inset: 0;\n z-index: var(--pg-z-index-toast, 11000);\n pointer-events: none;\n}\n\n.pg-toast-region {\n position: absolute;\n display: flex;\n flex-direction: column;\n gap: var(--pg-toast-gap, 10px);\n max-width: min(420px, calc(100vw - 32px));\n padding: 16px;\n pointer-events: none;\n}\n.pg-toast-region--top-left { top: 0; left: 0; }\n.pg-toast-region--top-center { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }\n.pg-toast-region--top-right { top: 0; right: 0; }\n.pg-toast-region--bottom-left { bottom: 0; left: 0; }\n.pg-toast-region--bottom-center{ bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; }\n.pg-toast-region--bottom-right { bottom: 0; right: 0; }\n\n/* \u2500\u2500 Toast card \u2500\u2500 */\n.pg-toast {\n --pg-toast-accent: var(--pg-colors-info, #2563eb);\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n box-sizing: border-box;\n width: 100%;\n min-width: 280px;\n padding: 12px 14px;\n overflow: hidden;\n background: var(--pg-colors-surface, #ffffff);\n color: var(--pg-colors-text-primary, #0f172a);\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-left: 3px solid var(--pg-toast-accent);\n border-radius: var(--pg-borders-radius-md, 8px);\n box-shadow: var(--pg-shadows-dropdown, 0 16px 48px rgba(15, 23, 42, 0.24));\n font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n font-size: var(--pg-typography-font-size-sm, 13px);\n pointer-events: auto;\n transition: opacity 0.28s var(--pg-transitions-easing-base, ease), transform 0.28s var(--pg-transitions-easing-base, ease);\n}\n\n.pg-toast--success { --pg-toast-accent: var(--pg-colors-success, #16a34a); }\n.pg-toast--error { --pg-toast-accent: var(--pg-colors-error, #dc2626); }\n.pg-toast--warning { --pg-toast-accent: var(--pg-colors-warning, #d97706); }\n.pg-toast--info { --pg-toast-accent: var(--pg-colors-info, #2563eb); }\n.pg-toast--loading { --pg-toast-accent: var(--pg-colors-text-secondary, #64748b); }\n\n.pg-toast__icon {\n display: inline-flex;\n flex: none;\n margin-top: 1px;\n color: var(--pg-toast-accent);\n}\n.pg-toast__icon svg { display: block; }\n\n.pg-toast__content { flex: 1; min-width: 0; }\n.pg-toast__title {\n font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n margin-bottom: 2px;\n line-height: 1.3;\n}\n.pg-toast__message {\n color: var(--pg-colors-text-secondary, #475569);\n line-height: 1.4;\n word-break: break-word;\n}\n\n.pg-toast__action {\n flex: none;\n align-self: center;\n padding: 4px 8px;\n border: none;\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: transparent;\n color: var(--pg-toast-accent);\n font: inherit;\n font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n cursor: pointer;\n transition: background var(--pg-transitions-duration-fast, 100ms) var(--pg-transitions-easing-base, ease);\n}\n.pg-toast__action:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-toast__action:focus-visible { outline: 2px solid var(--pg-toast-accent); outline-offset: 1px; }\n\n.pg-toast__close {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n margin: -2px -4px 0 0;\n padding: 0;\n border: none;\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: transparent;\n color: var(--pg-colors-text-disabled, #94a3b8);\n cursor: pointer;\n transition: color var(--pg-transitions-duration-fast, 100ms) var(--pg-transitions-easing-base, ease),\n background var(--pg-transitions-duration-fast, 100ms) var(--pg-transitions-easing-base, ease);\n}\n.pg-toast__close:hover { color: var(--pg-colors-text-primary, #0f172a); background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-toast__close:focus-visible { outline: 2px solid var(--pg-toast-accent); outline-offset: 1px; }\n.pg-toast__close svg { display: block; }\n\n/* \u2500\u2500 Progress bar (remaining time) \u2500\u2500 */\n.pg-toast__progress {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 3px;\n background: transparent;\n}\n.pg-toast__progress-bar {\n height: 100%;\n width: 100%;\n transform-origin: left center;\n background: var(--pg-toast-accent);\n opacity: 0.7;\n}\n.pg-toast__progress-bar--run {\n animation: pg-toast-progress var(--pg-toast-duration, 4500ms) linear forwards;\n}\n.pg-toast--paused .pg-toast__progress-bar { animation-play-state: paused; }\n\n@keyframes pg-toast-progress {\n from { transform: scaleX(1); }\n to { transform: scaleX(0); }\n}\n\n/* \u2500\u2500 Enter / exit transitions \u2500\u2500 */\n.pg-toast--enter { opacity: 0; }\n.pg-toast--anim-slide.pg-toast--enter { transform: translateY(14px); }\n.pg-toast--anim-scale.pg-toast--enter { transform: scale(0.95); }\n.pg-toast--exit { opacity: 0; transform: scale(0.97); }\n\n@media (prefers-reduced-motion: reduce) {\n .pg-toast { transition: none; }\n .pg-toast__progress-bar--run { animation: none; }\n}\n"; //# sourceMappingURL=toast.css.d.ts.map