@layer components {

    /* ============================================================
       BASE — .btn
       ============================================================ */
    .btn {
        @apply inline-flex items-center justify-center gap-2
        whitespace-nowrap rounded-md text-sm font-medium
        border border-transparent
        transition-colors duration-150
        cursor-pointer select-none
        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
        disabled:opacity-50 disabled:pointer-events-none
        h-10 px-4 py-2;
    }

    /* ============================================================
       SIZES
       ============================================================ */
    .btn-xs {
        @apply h-4 px-2 py-1 text-xs rounded;
    }


    .btn-sm {
        @apply px-3 py-1 text-xs rounded;
    }

    .btn-lg {
        @apply h-11 px-8 py-2 text-base rounded-md;
    }

    .btn-xl {
        @apply h-14 px-10 py-3 text-lg rounded-lg;
    }

    .btn-icon {
        @apply h-10 w-10 p-0;
    }

    .btn-icon.btn-sm {
        @apply h-8 w-8 p-0;
    }

    .btn-icon.btn-lg {
        @apply h-11 w-11 p-0;
    }

    /* ============================================================
       SOLID VARIANTS
       ============================================================ */
    .btn-primary {
        @apply bg-blue-600 text-white
        hover:bg-blue-700
        active:bg-blue-800
        focus-visible:ring-blue-500;
    }

    .btn-secondary {
        @apply bg-gray-200 text-gray-900
        hover:bg-gray-300
        active:bg-gray-400
        focus-visible:ring-gray-400;
    }

    .btn-danger {
        @apply bg-red-700 text-white dark:bg-red-400 dark:text-white
        hover:bg-red-800 hover:dark:bg-red-500
        active:bg-red-900
        focus-visible:ring-red-600;
    }

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

    .btn-warning {
        @apply bg-amber-400 text-gray-900
        hover:bg-amber-500
        active:bg-amber-600
        focus-visible:ring-amber-400;
    }

    .btn-info {
        @apply bg-sky-500 text-white
        hover:bg-sky-600
        active:bg-sky-700
        focus-visible:ring-sky-500;
    }

    .btn-dark {
        @apply bg-gray-900 text-white
        hover:bg-gray-800
        active:bg-gray-700
        focus-visible:ring-gray-700;
    }

    .btn-light {
        @apply bg-gray-100 text-gray-700
        hover:bg-gray-200
        active:bg-gray-300
        focus-visible:ring-gray-300;
    }

    /* ============================================================
       OUTLINE VARIANTS
       ============================================================ */
    .btn-outline {
        @apply bg-transparent text-gray-700
        border-gray-300
        hover:bg-gray-100
        active:bg-gray-200
        focus-visible:ring-gray-400;
    }

    .btn-outline-primary {
        @apply bg-transparent text-blue-600
        border-blue-600
        hover:bg-blue-600 hover:text-white
        active:bg-blue-700
        focus-visible:ring-blue-500;
    }

    .btn-outline-danger {
        @apply bg-transparent text-red-700 dark:text-red-400
        border-red-700 dark:border-red-400
        hover:bg-red-700 dark:hover:bg-red-400 hover:!text-white
        active:bg-red-800
        focus-visible:ring-red-600;
    }

    .btn-outline-success {
        @apply bg-transparent text-emerald-600
        border-emerald-600
        hover:bg-emerald-600 hover:text-white
        active:bg-emerald-700
        focus-visible:ring-emerald-500;
    }

    .btn-outline-warning {
        @apply bg-transparent text-amber-500
        border-amber-500
        hover:bg-amber-500 hover:text-white
        active:bg-amber-600
        focus-visible:ring-amber-400;
    }

    .btn-outline-info {
        @apply bg-transparent text-sky-500
        border-sky-500
        hover:bg-sky-500 hover:text-white
        active:bg-sky-600
        focus-visible:ring-sky-500;
    }

    .btn-outline-dark {
        @apply bg-transparent text-gray-900
        border-gray-900
        hover:bg-gray-900 hover:text-white
        active:bg-gray-800
        focus-visible:ring-gray-700;
    }

    /* ============================================================
       GHOST VARIANTS
       ============================================================ */
    .btn-ghost {
        @apply bg-transparent text-gray-700
        hover:bg-gray-100
        active:bg-gray-200
        focus-visible:ring-gray-400;
    }

    .btn-ghost-primary {
        @apply bg-transparent text-blue-600
        hover:bg-blue-50
        active:bg-blue-100
        focus-visible:ring-blue-500;
    }

    .btn-ghost-danger {
        @apply bg-transparent text-red-600
        hover:bg-red-50
        active:bg-red-100
        focus-visible:ring-red-500;
    }

    /* ============================================================
       LINK VARIANT
       ============================================================ */
    .btn-link {
        @apply bg-transparent text-blue-600
        underline-offset-4
        hover:underline
        focus-visible:ring-blue-500;
    }

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

    .btn-pill {
        @apply rounded-full;
    }

    .btn-raised {
        @apply shadow-md hover:shadow-lg active:shadow-sm;
    }

    .btn-loading {
        @apply opacity-75 pointer-events-none cursor-not-allowed;
    }

}