/**
 * Toast Component - Base Card Styles
 * 
 * Core toast notification card with glassmorphism effect.
 * Handles layout, backdrop effects, and base animations.
 * 
 * @package    Toastifier
 * @subpackage Components
 * @version    2.0.0
 * @since      2.0.0
 */

/* ═══════════════════════════════════════════════════════════
   Container (Fixed Position)
   ═══════════════════════════════════════════════════════════ */
#toastifier-toast-container,
#toastifier-container {
    position: fixed;
    top: 96px;
    right: 48px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: var(--toastifier-container-gap, 12px);
    max-width: 100%;
    width: 472px;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   Toast Card Base
   ═══════════════════════════════════════════════════════════ */
.toastifier-toast {
    display: flex;
    align-items: flex-start;
    padding: var(--toastifier-padding, 16px 20px);
    border-radius: var(--toastifier-border-radius, 16px);
    backdrop-filter: blur(4px) saturate(180%);
    -webkit-backdrop-filter: blur(4px) saturate(180%);
    transition: all var(--toastifier-transition-duration, 0.4s) var(--toastifier-transition-timing, cubic-bezier(0.33, 1, 0.68, 1));
    overflow: hidden;
    position: relative;
    pointer-events: auto;
    animation: toast-slide-in 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    transform-origin: bottom right;
    
    /* Styling */
    border-width: var(--toastifier-border-width, 2px);
    border-style: solid;
    box-shadow: var(--toastifier-shadow);
    
    /* GPU Acceleration (performance optimization) */
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
    transform: translateZ(0);
}

/* ═══════════════════════════════════════════════════════════
   Toast Type Variants (Colors)
   ═══════════════════════════════════════════════════════════ */
.toastifier-toast-success {
    background-color: var(--toastifier-success-bg);
    border-color: var(--toastifier-success-border);
    color: var(--toastifier-success-text);
}

.toastifier-toast-error {
    background-color: var(--toastifier-error-bg);
    border-color: var(--toastifier-error-border);
    color: var(--toastifier-error-text);
}

.toastifier-toast-warning {
    background-color: var(--toastifier-warning-bg);
    border-color: var(--toastifier-warning-border);
    color: var(--toastifier-warning-text);
}

.toastifier-toast-info {
    background-color: var(--toastifier-info-bg);
    border-color: var(--toastifier-info-border);
    color: var(--toastifier-info-text);
}

/* ═══════════════════════════════════════════════════════════
   State Modifiers
   ═══════════════════════════════════════════════════════════ */
.toastifier-toast-show {
    opacity: 1;
    transform: translateX(0);
}

.toastifier-toast-hide {
    opacity: 0;
    transform: translateX(120%);
    pointer-events: none;
}