/* Notification Auto-dismiss Progress Bar */
.notification {
  position: relative;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  overflow: visible;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Faster animation for manual dismissals */
.notification.is-dismissing-fast {
  transition:
    opacity 0.1s ease,
    transform 0.1s ease;
}

/* Light mode notifications - consistent colors */
.notification.is-primary.is-light {
  background-color: #ebfffc;
  color: #00947e;
  border-color: #00d1b2;
}

.notification.is-success,
.notification.is-success.is-light {
  background-color: #effaf5;
  color: #257953;
  border-color: #48c78e;
}

.notification.is-danger.is-light {
  background-color: #feecf0;
  color: #cc0f35;
  border-color: #f14668;
}

.notification.is-warning.is-light {
  background-color: #fffaeb;
  color: #946c00;
  border-color: #ffe08a;
}

/* Dark mode notification backgrounds and borders */
[data-theme="dark"] .notification.is-primary.is-light {
  background-color: #1a3a3a;
  color: #00d1b2;
  border-color: #00d1b2;
}

[data-theme="dark"] .notification.is-success,
[data-theme="dark"] .notification.is-success.is-light {
  background-color: #1a4a2e;
  color: #72dda4;
  border-color: #72dda4;
}

[data-theme="dark"] .notification.is-danger,
[data-theme="dark"] .notification.is-danger.is-light {
  background-color: #4a1e28;
  color: #ff6b8a;
  border-color: #ff6b8a;
}

[data-theme="dark"] .notification.is-warning.is-light {
  background-color: #4a3a1a;
  color: #ffe08a;
  border-color: #ffe08a;
}

.notification-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.25);
  transition: width 0.1s linear;
  width: 100%;
  z-index: 10;
  border-radius: 0 0 4px 4px;
}

.notification.is-primary .notification-progress-bar {
  background-color: rgba(0, 209, 178, 0.5);
}

.notification.is-success .notification-progress-bar {
  background-color: rgba(48, 167, 108, 0.8);
}

.notification.is-danger .notification-progress-bar {
  background-color: rgba(241, 70, 104, 0.5);
}

.notification.is-warning .notification-progress-bar {
  background-color: rgba(255, 224, 138, 0.5);
}