Toasts JS Required

<div class="focus-toast">
  <i class="focus-toast-icon fa fa-info-circle"></i>
  <div class="focus-toast-content">
    <div class="focus-toast-title">Notification</div>
    <div class="focus-toast-message">This is a toast message.</div>
  </div>
  <button class="focus-toast-close">×</button>
</div>

<div class="focus-toast focus-toast-success">
  <i class="focus-toast-icon fa fa-check-circle"></i>
  <div class="focus-toast-content">
    <div class="focus-toast-title">Success!</div>
    <div class="focus-toast-message">Your changes have been saved.</div>
  </div>
  <button class="focus-toast-close">×</button>
</div>

<div class="focus-toast focus-toast-danger">...</div>
<div class="focus-toast focus-toast-warning">...</div>
<div class="focus-toast focus-toast-info">...</div>

<!-- Top Right (default) -->
<div class="focus-toast-container">
  <div class="focus-toast">...</div>
</div>

<!-- Bottom Right -->
<div class="focus-toast-container focus-toast-container-bottom-right">
  <div class="focus-toast">...</div>
</div>

<!-- Bottom Left -->
<div class="focus-toast-container focus-toast-container-bottom-left">
  <div class="focus-toast">...</div>
</div>

<!-- Top Left -->
<div class="focus-toast-container focus-toast-container-top-left">
  <div class="focus-toast">...</div>
</div>

<!-- Top Center -->
<div class="focus-toast-container focus-toast-container-top-center">
  <div class="focus-toast">...</div>
</div>

<!-- Bottom Center -->
<div class="focus-toast-container focus-toast-container-bottom-center">
  <div class="focus-toast">...</div>
</div>

<div class="focus-toast focus-toast-primary">
  <i class="focus-toast-icon fa fa-download"></i>
  <div class="focus-toast-content">
    <div class="focus-toast-title">Download Started</div>
    <div class="focus-toast-message">Your file is being downloaded...</div>
  </div>
  <button class="focus-toast-close">×</button>
  <div class="focus-toast-progress">
    <div class="focus-toast-progress-bar" style="animation-duration: 5s;"></div>
  </div>
</div>

// Create toast notification function
function showToast(type, title, message, duration = 3000) {
  // Create or get toast container
  let container = document.querySelector('.focus-toast-container');
  if (!container) {
    container = document.createElement('div');
    container.className = 'focus-toast-container';
    document.body.appendChild(container);
  }
  
  // Create toast element
  const toast = document.createElement('div');
  toast.className = `focus-toast focus-toast-${type}`;
  
  // Select icon based on type
  const icons = {
    success: 'fa-check-circle',
    danger: 'fa-times-circle',
    warning: 'fa-exclamation-triangle',
    info: 'fa-info-circle'
  };
  
  toast.innerHTML = `
    <i class="focus-toast-icon fa ${icons[type] || 'fa-info-circle'}"></i>
    <div class="focus-toast-content">
      <div class="focus-toast-title">${title}</div>
      <div class="focus-toast-message">${message}</div>
    </div>
    <button class="focus-toast-close">×</button>
  `;
  
  // Add to container
  container.appendChild(toast);
  
  // Close button handler
  const closeBtn = toast.querySelector('.focus-toast-close');
  closeBtn.addEventListener('click', () => removeToast(toast));
  
  // Auto dismiss
  if (duration > 0) {
    setTimeout(() => removeToast(toast), duration);
  }
}

function removeToast(toast) {
  toast.classList.add('focus-toast-exit');
  setTimeout(() => toast.remove(), 300);
}

// Usage examples
showToast('success', 'Success!', 'Operation completed successfully.');
showToast('danger', 'Error!', 'Something went wrong.');
showToast('warning', 'Warning!', 'Please review your input.');
showToast('info', 'Info', 'Here is some information.');