/* example usage */
/* 
const Toast = Swal.mixin({
  toast: true,
  position: "top-end",
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
  didOpen: (toast) => {
      toast.onmouseenter = Swal.stopTimer;
      toast.onmouseleave = Swal.resumeTimer;
  }
});


$("#testToastBtn").on('click', function() {
  Toast.fire({
      icon: 'error',
      title: 'تم بنجاح!',
      text: "تيست",
      showConfirmButton: false,
      timer: 3000,
      toast: true
  });
}); */

:root {
    /* Toast container styling for light mode */
    --toast-background: var(--color-gray-100);
    --toast-border: var(--color-gray-300);
    --toast-text: var(--color-gray-600);
    --toast-title: var(--color-gray-800);
    --toast-shadow: var(--shadow-medium);

    /* Toast types - Light mode */
    --toast-success-color: var(--color-primary-600);

    --toast-error-color: var(--color-red-700);

    --toast-warning-color: #f59e0b; /* Amber-500 */

    --toast-info-color: var(--color-secondary-600);

    /* Toast progress bar - Light mode */
    --toast-progress-success: var(--color-primary-500);
    --toast-progress-error: var(--color-red-500);
    --toast-progress-warning: #f59e0b; /* Amber-500 */
    --toast-progress-info: var(--color-secondary-500);
}

html.dark {
    /* Toast container styling for dark mode */
    --toast-background: var(--color-gray-800);
    --toast-border: var(--color-gray-700);
    --toast-text: var(--color-gray-400);
    --toast-title: var(--color-gray-200);
    --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    /* Toast types - Dark mode */
    --toast-success-color: var(--color-primary-400);

    --toast-error-color: var(--color-red-400);

    --toast-warning-color: #fbbf24; /* Amber-400 */

    --toast-info-color: var(--color-secondary-400);

    /* Toast progress bar - Dark mode */
    --toast-progress-success: var(--color-primary-500);
    --toast-progress-error: var(--color-red-500);
    --toast-progress-warning: #fbbf24; /* Amber-400 */
    --toast-progress-info: var(--color-secondary-500);
}

.swal2-backdrop-show {
    background-color: var(--toast-backdrop) !important;
}
/* Base Toast Container Styling */
.swal2-popup.swal2-toast {
    background-color: var(--toast-background) !important;
    color: var(--toast-text) !important;
    box-shadow: var(--toast-shadow) !important;
    border-radius: var(--card-border-radius) !important;
}

.swal2-popup.swal2-toast .swal2-title {
    color: var(--toast-title) !important;
    font-weight: 600 !important;
}

.swal2-popup.swal2-toast .swal2-html-container {
    color: var(--toast-text) !important;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-warning {
    color: var(--toast-warning-color) !important;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-info {
    color: var(--toast-info-color) !important;
}

/* Toast Progress Bar */
.swal2-popup.swal2-toast.swal2-icon-success .swal2-timer-progress-bar {
    background-color: var(--toast-progress-success) !important;
}

.swal2-popup.swal2-toast.swal2-icon-error .swal2-timer-progress-bar {
    background-color: var(--toast-progress-error) !important;
}

.swal2-popup.swal2-toast.swal2-icon-warning .swal2-timer-progress-bar {
    background-color: var(--toast-progress-warning) !important;
}

.swal2-popup.swal2-toast.swal2-icon-info .swal2-timer-progress-bar {
    background-color: var(--toast-progress-info) !important;
}

/* RTL support */
[dir="rtl"] .swal2-popup.swal2-toast {
    text-align: right !important;
}

/* Animation */
.swal2-popup.swal2-toast.swal2-show {
    animation: toast-in-right 0.3s ease !important;
}

.swal2-popup.swal2-toast.swal2-hide {
    animation: toast-out-left 0.3s ease !important;
}

@keyframes toast-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-out-right {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* RTL animations */
[dir="rtl"] .swal2-popup.swal2-toast.swal2-show {
    animation: toast-in-left 0.3s ease !important;
}

[dir="rtl"] .swal2-popup.swal2-toast.swal2-hide {
    animation: toast-out-right 0.3s ease !important;
}

@keyframes toast-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-out-left {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}