/* Alert Component
   ========================================================================== */

.alert {
  position: relative;
  display: flex;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem);
  margin-block-end: var(--space-4, 1rem);
  border-radius: var(--radius-md, 0.375rem);
  border: 1px solid transparent;
}

/* Alert Variants */
.alert--info {
  background-color: oklch(from var(--color-info, #0ea5e9) l c h / 0.1);
  border-color: oklch(from var(--color-info, #0ea5e9) l c h / 0.3);
  color: var(--color-info-dark, #0369a1);
}

.alert--success {
  background-color: oklch(from var(--color-success, #10b981) l c h / 0.1);
  border-color: oklch(from var(--color-success, #10b981) l c h / 0.3);
  color: var(--color-success-dark, #047857);
}

.alert--warning {
  background-color: oklch(from var(--color-warning, #f59e0b) l c h / 0.1);
  border-color: oklch(from var(--color-warning, #f59e0b) l c h / 0.3);
  color: var(--color-warning-dark, #b45309);
}

.alert--danger {
  background-color: oklch(from var(--color-danger, #dc2626) l c h / 0.1);
  border-color: oklch(from var(--color-danger, #dc2626) l c h / 0.3);
  color: var(--color-danger-dark, #991b1b);
}

/* Alert Icon */
.alert__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

/* Alert Content */
.alert__content {
  flex: 1;
  min-width: 0;
}

.alert__title {
  font-weight: 600;
  margin-block-end: var(--space-1, 0.25rem);
}

.alert__message {
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
}

/* Alert Close Button */
.alert__close {
  position: absolute;
  top: var(--space-2, 0.5rem);
  right: var(--space-2, 0.5rem);
  padding: var(--space-1, 0.25rem);
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s ease-in-out;
}

.alert__close:hover {
  opacity: 1;
}

.alert--dismissible {
  padding-inline-end: var(--space-10, 2.5rem);
}

/* Alert Animation */
@keyframes alert-slide-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert {
  animation: alert-slide-in 0.2s ease-out;
}