.alert {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms ease;
}

.alert.is-dismissing {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.alert strong {
  display: block;
  margin-bottom: var(--space-1);
}

.alert p {
  margin: 0;
  color: var(--color-text-muted);
}

.alert button {
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: currentColor;
  font-size: 1.25rem;
  line-height: 1;
}

.alert-info {
  background: var(--color-info-bg);
}

.alert-success {
  border-color: rgba(19, 121, 91, 0.24);
  background: var(--color-success-bg);
}

.alert-warning {
  border-color: rgba(161, 92, 7, 0.24);
  background: var(--color-warning-bg);
}

.alert-danger {
  border-color: rgba(180, 35, 24, 0.24);
  background: var(--color-danger-bg);
}

@media (prefers-reduced-motion: reduce) {
  .alert {
    transition-duration: 1ms;
  }
}