/* ==========================================
   Toast Component
   ========================================== */

/* ==========================================
   Base Toast Container
   ========================================== */

   .toast {
    position: fixed;
    top: var(--spacing-4);
    right: var(--spacing-4);
    left: var(--spacing-4);
    z-index: var(--z-tooltip);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-height: 3.125rem;
    padding: var(--spacing-3) var(--spacing-4);
    border: var(--border-width-2) solid var(--background);
    border-radius: var(--radius-lg);

    background: var(--color-white);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(-100%);
    transition: all var(--transition-base);
  }
  
  /* ==========================================
     Toast States
     ========================================== */
  
  .toast.toast-show {
    opacity: 1;
    transform: translateY(0);
  }
  
  .toast.toast-hide {
    opacity: 0;
    transform: translateY(-100%);
  }
  
  /* ==========================================
     Toast Variants
     ========================================== */
  
  .toast-success { background: var(--success); }
  .toast-error { background: var(--danger); }
  .toast-warning { background: var(--warning); }
  .toast-info { background: var(--primary); }
  
  /* ==========================================
     Toast Content Structure
     ========================================== */
  
  .toast-content {
    flex: 1;
    min-width: 0; /* Prevents text overflow */
  }
  
  .toast-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--text-inverse);
  }
  
  .toast-desc {
    margin-top: var(--spacing-1);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-inverse);
    opacity: 0.8;
  }
  
  /* ==========================================
     Toast Controls
     ========================================== */
  
  .toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--spacing-5);
    height: var(--spacing-5);
    padding: var(--spacing-1);
    border: none;
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text-inverse);
    background: none;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--transition-fast);
  }
  
  .toast-close:hover {
    opacity: 1;
  }
  
  .toast-close:focus-visible {
    opacity: 1;
    outline: var(--border-width-2) solid var(--text-inverse);
    outline-offset: 2px;
  }
  
  /* ==========================================
     Toast Stacking
     ========================================== */
  
  .toast + .toast {
    margin-top: var(--spacing-2);
  }
  
  /* ==========================================
     Media Queries - Tablet (768px+)
     ========================================== */
  
  @media (min-width: 768px) {
    .toast {
      top: var(--spacing-5);
      right: var(--spacing-5);
      left: auto;
      min-width: 280px;
      max-width: 400px;
      transform: translateX(100%);
    }
    
    .toast.toast-show {
      transform: translateX(0);
    }
    
    .toast.toast-hide {
      transform: translateX(100%);
    }
  }
  
  /* ==========================================
     Accessibility - Reduced Motion
     ========================================== */
  
  @media (prefers-reduced-motion: reduce) {
    .toast {
      transition: opacity var(--transition-fast);
      transform: none;
    }
    
    @media (min-width: 768px) {
      .toast {
        transform: none;
      }
    }
    
    .toast.toast-show {
      transform: none;
    }
    
    .toast.toast-hide {
      opacity: 0;
      transform: none;
    }
  }
  
  /* ==========================================
     Print Styles
     ========================================== */
  
  @media print {
    .toast {
      display: none !important;
    }
  }