Toast Message

---
/**
 * ToastNotif — A transient snackbar notification that appears at the corner of the screen.
 * 
 * @param {string} message - The notification content.
 * @param {string} icon - Emoji or SVG icon. Default is '✅'.
 * @param {'success'|'info'|'error'} variant - Theme of the toast. Default is 'success'.
 * @param {boolean} show - Initial visibility. Default is true.
 */
interface Props {
  message: string;
  icon?: string;
  variant?: 'success' | 'info' | 'error';
  show?: boolean;
}

const { 
  message, 
  icon = "✅", 
  variant = 'success',
  show = true 
} = Astro.props;
---

<div class:list={['toast', `toast--${variant}`, { 'toast--show': show }]} role="status">
  <div class="toast__icon" aria-hidden="true">{icon}</div>
  <span class="toast__msg">{message}</span>
</div>

<style>
  .toast { 
    position: fixed; 
    bottom: 2rem; 
    right: 2rem; 
    background: var(--c-bg-elev, #0f172a); 
    color: var(--c-text-1, #fff); 
    padding: var(--sp-4, 1rem) var(--sp-6, 1.5rem); 
    border-radius: var(--r-md, 14px); 
    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
    display: flex; 
    align-items: center; 
    gap: var(--sp-3, 0.8rem); 
    box-shadow: 0 15px 45px rgba(0,0,0,0.4); 
    transform: translateY(150%) scale(0.9); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    z-index: 10000; 
  }
  
  .toast--show { transform: translateY(0) scale(1); }
  
  .toast--success { border-left: 4px solid #10b981; }
  .toast--info { border-left: 4px solid var(--c-primary, #6366f1); }
  .toast--error { border-left: 4px solid #ef4444; }
  
  .toast__icon { 
    background: rgba(255,255,255,0.05); 
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: var(--r-sm, 6px); 
    font-size: 1rem;
    flex-shrink: 0;
  }
  
  .toast__msg { font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
</style>