/* ==============================
 * Utilities (atomic, reusable)
 * ============================== */

@utility btn-outline {
    @apply bg-transparent border;
}

@layer components {

    /* ========= Base ========= */
    .btn {
        @apply cursor-pointer inline-flex items-center justify-center
        rounded-lg px-4 py-2 text-sm font-semibold
        transition-all duration-150 select-none
        focus:outline-none focus:ring-2 focus:ring-offset-2
        disabled:opacity-60 disabled:cursor-not-allowed
        dark:focus:ring-offset-slate-900;
    }

    /* ========= Sizes ========= */
    .btn-xs {
        @apply px-2 py-1 text-xs rounded-lg;
    }

    .btn-sm {
        @apply px-3 py-1.5 text-sm rounded-lg;
    }

    .btn-lg {
        @apply px-6 py-3 text-base rounded-2xl;
    }

    .btn-xl {
        @apply px-8 py-4 text-lg rounded-2xl;
    }

    /* ========= Solid variants ========= */
    .btn-primary {
        @apply bg-slate-900 text-white
        hover:bg-slate-800 focus:ring-slate-400
        dark:bg-slate-100 dark:text-slate-900
        dark:hover:bg-slate-200 dark:focus:ring-slate-600;
    }

    .btn-secondary {
        @apply bg-white text-slate-900 border border-slate-200
        hover:bg-slate-50 focus:ring-slate-300
        dark:bg-slate-800 dark:text-slate-100 dark:border-slate-700
        dark:hover:bg-slate-700 dark:focus:ring-slate-600;
    }

    .btn-success {
        @apply bg-emerald-600 text-white
        hover:bg-emerald-700 focus:ring-emerald-400
        dark:bg-emerald-500 dark:hover:bg-emerald-600
        dark:focus:ring-emerald-500;
    }

    .btn-danger {
        @apply bg-rose-600 text-white
        hover:bg-rose-700 focus:ring-rose-400
        dark:bg-rose-500 dark:hover:bg-rose-600
        dark:focus:ring-rose-500;
    }

    .btn-warning {
        @apply bg-amber-500 text-white
        hover:bg-amber-600 focus:ring-amber-400
        dark:bg-amber-400 dark:hover:bg-amber-500
        dark:focus:ring-amber-500;
    }

    /* ========= Outline variants ========= */
    .btn-outline-primary {
        @apply bg-transparent border border-slate-900 text-slate-900
        hover:bg-slate-900 hover:text-white
        focus:ring-slate-400
        dark:border-slate-100 dark:text-slate-100
        dark:hover:bg-slate-100 dark:hover:text-slate-900
        dark:focus:ring-slate-600;
    }

    .btn-outline-danger {
        @apply bg-transparent border border-rose-600 text-rose-600
        hover:bg-rose-600 hover:text-white
        focus:ring-rose-400
        dark:border-rose-500 dark:text-rose-500
        dark:hover:bg-rose-500 dark:hover:text-white
        dark:focus:ring-rose-500;
    }

    /* ========= Soft variants ========= */
    .btn-soft-primary {
        @apply bg-slate-100 text-slate-900
        hover:bg-slate-200 focus:ring-slate-300
        dark:bg-slate-800 dark:text-slate-100
        dark:hover:bg-slate-700 dark:focus:ring-slate-600;
    }

    .btn-soft-danger {
        @apply bg-rose-50 text-rose-700
        hover:bg-rose-100 focus:ring-rose-300
        dark:bg-rose-900/30 dark:text-rose-400
        dark:hover:bg-rose-900/50 dark:focus:ring-rose-500;
    }

    /* ========= Icon support ========= */
    .btn > svg:first-child {
        @apply me-2;
    }

    .btn > svg:last-child {
        @apply ms-2;
    }

    /* ========= Icon only ========= */
    .btn-icon {
        @apply p-2 rounded-xl;
    }

    /* ========= Block ========= */
    .btn-block {
        @apply w-full;
    }

    /* ========= Loading ========= */
    /*.btn-loading {*/
    /*    @apply relative pointer-events-none text-transparent;*/
    /*}*/

    /*.btn-loading::after {*/
    /*    content: "";*/
    /*    @apply absolute h-4 w-4 rounded-full*/
    /*    border-2 border-white/30 border-t-white animate-spin*/
    /*    dark:border-slate-400/30 dark:border-t-slate-100;*/
    /*}*/
}