/* Toast Atom */
.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: var(--container-sm);
  max-width: var(--space-96);
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-surface);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  animation: toast-slide-in var(--duration-300) var(--easing-out);
}

.toast-icon {
  flex-shrink: 0;
}

.toast-message {
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

.toast-action {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-hover);
  background: none;
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-150) var(--easing-out);
}

.toast-action:hover {
  background-color: var(--bg-surface-hover);
}

.toast-close {
  flex-shrink: 0;
  padding: var(--space-0_5);
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--duration-150) var(--easing-out);
}

.toast-close:hover {
  background-color: var(--bg-surface-hover);
  color: var(--text-secondary);
}

.toast-info { border-left: var(--border-width-4) solid var(--color-info); }
.toast-info .toast-icon { color: var(--color-info); }

.toast-success { border-left: var(--border-width-4) solid var(--color-success); }
.toast-success .toast-icon { color: var(--color-success); }

.toast-warning { border-left: var(--border-width-4) solid var(--color-warning); }
.toast-warning .toast-icon { color: var(--color-warning); }

.toast-error { border-left: var(--border-width-4) solid var(--color-error); }
.toast-error .toast-icon { color: var(--color-error); }

/* Fade out animation for dismissal */
.toast-fade-out {
  animation: toast-fade-out var(--duration-300) var(--easing-out) forwards;
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}