/* Notification Styles */
.notification {
  @apply bg-white border border-gray-200 rounded-lg shadow-lg p-4 mb-3 transition-all duration-300 ease-in-out;
  min-width: 300px;
  max-width: 500px;
}

.notification-content {
  @apply flex items-start;
}

.notification-content.no-child {
  @apply items-center;
}

.notification-title {
  @apply font-semibold text-gray-900 text-sm;
}

.notification-description {
  @apply text-gray-600 text-sm;
}

.notification-close {
  @apply text-gray-400 hover:text-gray-600 transition-colors duration-200;
}

/* Toast Container */
.toast {
  @apply pointer-events-none;
}

.toast-wrapper {
  @apply pointer-events-auto mb-3;
}

/* Status-specific styles */
.notification[data-type="success"] {
  @apply border-green-200 bg-green-50;
}

.notification[data-type="success"] .notification-title {
  @apply text-green-800;
}

.notification[data-type="success"] .notification-description {
  @apply text-green-700;
}

.notification[data-type="danger"] {
  @apply border-red-200 bg-red-50;
}

.notification[data-type="danger"] .notification-title {
  @apply text-red-800;
}

.notification[data-type="danger"] .notification-description {
  @apply text-red-700;
}

.notification[data-type="warning"] {
  @apply border-yellow-200 bg-yellow-50;
}

.notification[data-type="warning"] .notification-title {
  @apply text-yellow-800;
}

.notification[data-type="warning"] .notification-description {
  @apply text-yellow-700;
}

.notification[data-type="info"] {
  @apply border-blue-200 bg-blue-50;
}

.notification[data-type="info"] .notification-title {
  @apply text-blue-800;
}

.notification[data-type="info"] .notification-description {
  @apply text-blue-700;
}