/* Alert component styles */

/* Base alert styles */
.alert {
  @apply flex w-full flex-row items-start justify-start gap-4 bg-surface px-4 py-3 shadow-surface;
  border-radius: min(32px, var(--radius-3xl));
}

/* Alert elements */
.alert__content {
  @apply flex h-full grow flex-col items-start;
}

.alert__indicator {
  @apply flex items-center justify-center p-1 select-none;

  [data-slot="alert-default-icon"] {
    @apply box-content size-4;
  }
}

.alert__title {
  @apply text-sm leading-6 font-medium;
}

.alert__description {
  @apply text-sm text-muted;
}

/* Variant modifiers */
.alert--default .alert__indicator {
  @apply text-foreground;
}

.alert--default .alert__title {
  @apply text-foreground;
}

.alert--accent .alert__indicator {
  @apply text-accent-soft-foreground;
}

.alert--accent .alert__title {
  @apply text-accent-soft-foreground;
}

.alert--success .alert__indicator {
  @apply text-success-soft-foreground;
}

.alert--success .alert__title {
  @apply text-success-soft-foreground;
}

.alert--warning .alert__indicator {
  @apply text-warning-soft-foreground;
}

.alert--warning .alert__title {
  @apply text-warning-soft-foreground;
}

.alert--danger .alert__indicator {
  @apply text-danger-soft-foreground;
}

.alert--danger .alert__title {
  @apply text-danger-soft-foreground;
}