Stacked Toast Center

'use client';

import './ToastStackOverlay.css';

/** ToastStackOverlay — ported from astro-component-kit. */
export interface ToastStackOverlayProps {
}

export function ToastStackOverlay({}: ToastStackOverlayProps) {
  return (
    <>
      <div className="toast-stack" data-rk-e22de0="">
        <div className="toast-mini success" data-rk-e22de0="">Profile updated!</div>
        <div className="toast-mini error" data-rk-e22de0="">Failed to sync changes.</div>
      </div>
    </>
  );
}

export default ToastStackOverlay;

/* ToastStackOverlay — ported from astro-component-kit (overlays/ToastStackOverlay.astro) */

.toast-stack:where([data-rk-e22de0]) { position: fixed; top: 2rem; right: 2rem; z-index: 5000; display: flex; flex-direction: column; gap: 0.75rem; }
.toast-mini:where([data-rk-e22de0]) { background: #111; color: #fff; padding: 0.75rem 1.5rem; border-radius: 10px; border-left: 4px solid #333; font-size: 0.85rem; box-shadow: 0 10px 30px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); }
.success:where([data-rk-e22de0]) { border-left-color: #10b981; }
.error:where([data-rk-e22de0]) { border-left-color: #ef4444; }