@utility alert-outline {
    @apply bg-transparent;
}

@layer components {

    /* ========= Base ========= */
    .alert {
        @apply relative rounded-2xl border p-4 text-sm
        border-slate-200 dark:border-white/10;
    }

    .alert-title {
        @apply text-sm font-semibold;
    }

    .alert-text {
        @apply mt-1 text-sm leading-relaxed;
    }

    .alert-actions {
        @apply mt-4 flex flex-wrap gap-2;
    }

    /* Layout helpers */
    .alert-row {
        @apply flex items-start gap-3;
    }

    .alert-icon {
        @apply mt-0.5 h-5 w-5 shrink-0;
    }

    /* ========= Variants (soft) ========= */
    .alert-soft-primary {
        @apply border-slate-200 bg-slate-50 text-slate-800
        dark:border-slate-700 dark:bg-slate-900/60 dark:text-slate-200;
    }

    .alert-soft-success {
        @apply border-emerald-200 bg-emerald-50 text-emerald-900
        dark:border-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200;
    }

    .alert-soft-warning {
        @apply border-amber-200 bg-amber-50 text-amber-900
        dark:border-amber-700 dark:bg-amber-900/40 dark:text-amber-200;
    }

    .alert-soft-danger {
        @apply border-rose-200 bg-rose-50 text-rose-900
        dark:border-rose-700 dark:bg-rose-900/40 dark:text-rose-200;
    }

    .alert-soft-info {
        @apply border-sky-200 bg-sky-50 text-sky-900
        dark:border-sky-700 dark:bg-sky-900/40 dark:text-sky-200;
    }

    /* ========= Variants (solid) ========= */
    .alert-solid-primary {
        @apply border-slate-900 bg-slate-900 text-white
        dark:border-slate-700;
    }

    .alert-solid-success {
        @apply border-emerald-700 bg-emerald-700 text-white
        dark:border-emerald-600;
    }

    .alert-solid-warning {
        @apply border-amber-600 bg-amber-600 text-white
        dark:border-amber-500;
    }

    .alert-solid-danger {
        @apply border-rose-700 bg-rose-700 text-white
        dark:border-rose-600;
    }

    .alert-solid-info {
        @apply border-sky-700 bg-sky-700 text-white
        dark:border-sky-600;
    }

    /* Make links readable inside solid alerts */
    .alert-solid-primary a,
    .alert-solid-success a,
    .alert-solid-warning a,
    .alert-solid-danger a,
    .alert-solid-info a {
        @apply underline underline-offset-2;
    }

    /* ========= Outline ========= */
    .alert-outline-primary {
        @apply alert-outline border-slate-900 text-slate-900
        dark:border-slate-400 dark:text-slate-200;
    }

    .alert-outline-danger {
        @apply alert-outline border-rose-600 text-rose-700
        dark:border-rose-400 dark:text-rose-300;
    }

    /* ========= Dismiss button ========= */
    .alert-dismiss {
        @apply absolute top-3 end-3 inline-flex items-center justify-center
        rounded-xl p-2 text-current/70
        hover:text-current hover:bg-black/5
        dark:hover:bg-white/10
        focus:outline-none focus:ring-2 focus:ring-offset-2
        focus:ring-offset-white dark:focus:ring-offset-slate-900;
    }

    /* Proper ring colors per variant */
    .alert-soft-primary .alert-dismiss {
        @apply focus:ring-slate-300 dark:focus:ring-slate-600;
    }

    .alert-soft-success .alert-dismiss {
        @apply focus:ring-emerald-300 dark:focus:ring-emerald-600;
    }

    .alert-soft-warning .alert-dismiss {
        @apply focus:ring-amber-300 dark:focus:ring-amber-600;
    }

    .alert-soft-danger .alert-dismiss {
        @apply focus:ring-rose-300 dark:focus:ring-rose-600;
    }

    .alert-soft-info .alert-dismiss {
        @apply focus:ring-sky-300 dark:focus:ring-sky-600;
    }

    .alert-solid-primary .alert-dismiss {
        @apply focus:ring-white/50 focus:ring-offset-slate-900;
    }

    .alert-solid-success .alert-dismiss {
        @apply focus:ring-white/50 focus:ring-offset-emerald-700;
    }

    .alert-solid-warning .alert-dismiss {
        @apply focus:ring-white/50 focus:ring-offset-amber-600;
    }

    .alert-solid-danger .alert-dismiss {
        @apply focus:ring-white/50 focus:ring-offset-rose-700;
    }

    .alert-solid-info .alert-dismiss {
        @apply focus:ring-white/50 focus:ring-offset-sky-700;
    }

    /* ========= Validation list ========= */
    .alert-list {
        @apply mt-3 space-y-1 text-sm;
    }

    .alert-list li {
        @apply flex items-start gap-2;
    }

    .alert-list li::before {
        content: "";
        @apply mt-2 h-1.5 w-1.5 shrink-0 rounded-full
        bg-current opacity-70;
    }
}