@layer components {
    .btn-primary, .btn-secondary, .btn-danger, .btn-info, .btn-success, .btn-warning {
        @apply rounded-md px-3 py-2 text-center text-sm font-semibold text-white no-underline shadow-sm transition-shadow duration-150;
    }
    .prose a.btn-primary, .prose a.btn-secondary, .prose a.btn-danger,
    .prose a.btn-info, .prose a.btn-success, .prose a.btn-warning,
    .prose a.btn-product, .prose a.btn-product-pinned, .prose a.btn-addon {
        @apply text-white no-underline;
    }

    .btn-primary, .btn-primary:hover {
        @apply bg-primary;
    }
    .btn-secondary, .btn-secondary:hover {
        @apply bg-gray-600;
    }
    .btn-danger, .btn-danger:hover {
        @apply bg-red-600;
    }
    .btn-info, .btn-info:hover {
        @apply bg-blue-600;
    }
    .btn-success, .btn-success:hover {
        @apply bg-emerald-700;
    }
    .btn-warning, .btn-warning:hover {
        @apply bg-yellow-700;
    }

    .btn-primary {
        @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
    }
    .btn-secondary {
        @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600;
    }
    .btn-danger {
        @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600;
    }
    .btn-info {
        @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600;
    }
    .btn-success {
        @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-700;
    }
    .btn-warning {
        @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-700;
    }

    .btn-product, .btn-product-pinned {
        @apply mt-5 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-white no-underline transition-shadow duration-150 disabled:opacity-50 disabled:pointer-events-none;
    }
    .btn-product, .btn-product:hover {
        @apply bg-primary;
    }
    .btn-product-pinned, .btn-product-pinned:hover {
        @apply bg-primary-dark;
    }

    .btn-addon {
        @apply w-[2.875rem] h-[2.875rem] flex-shrink-0 inline-flex justify-center items-center gap-x-2 rounded-e-md border border-transparent text-sm font-semibold text-white no-underline transition-shadow duration-150 disabled:opacity-50 disabled:pointer-events-none;
    }
    .btn-addon, .btn-addon:hover {
        @apply bg-blue-600;
    }

    .btn-primary-soft, .prose a.btn-primary-soft {
        @apply py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold no-underline rounded-lg border border-transparent bg-primary-light text-primary-dark transition-colors duration-150 disabled:opacity-50 disabled:pointer-events-none;
    }
    .btn-primary-soft:hover, .prose a.btn-primary-soft:hover {
        @apply bg-primary/20;
    }

    .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover, .btn-info:hover,
    .btn-success:hover, .btn-warning:hover, .btn-product:hover,
    .btn-product-pinned:hover, .btn-addon:hover {
        box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 0.10), 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }

    .btn-action-with-icon {
        @apply py-1 px-2 inline-flex items-center gap-2 rounded-lg border font-medium bg-white text-gray-700 shadow-sm align-middle transition-all text-sm;
    }
    .btn-action-with-icon:hover {
        @apply bg-gray-50;
    }
    .btn-action-with-icon:focus {
        @apply outline-none ring-2 ring-offset-white focus:ring-primary;
    }
    .btn-action-danger {
        @apply bg-white text-red-700 border-red-200;
    }
    .btn-action-danger:hover {
        @apply bg-red-50;
    }
    .btn-icon {
        @apply w-9 h-9 mr-2 relative inline-flex justify-center items-center text-sm font-semibold rounded-lg border;
    }
    .btn-icon:disabled {
        @apply opacity-50 pointer-events-none;
    }
    .btn-icon:hover {
        @apply bg-gray-100;
    }
    .btn-icon2 {
        @apply w-9 h-9 relative inline-flex justify-center items-center text-sm font-semibold rounded-lg text-gray-800 z-20;
    }
    .btn-icon2:hover {
        @apply bg-gray-100;
    }
    .btn-icon2:disabled {
        @apply opacity-50 pointer-events-none;
    }

    /**
    Darkmode
     */
    .dark .btn-icon2 {
        @apply text-white border-gray-700
    }
    .dark .btn-icon2:hover {
        @apply bg-gray-700
    }
    .dark .btn-icon2:focus {
        @apply outline-none ring-1 ring-gray-600
    }
    .dark .btn-primary:focus {
        @apply outline-none ring-1 ring-gray-600
    }
    .dark .btn-icon {
        @apply border-gray-700 text-gray-400
    }

    .dark .btn-action-with-icon {
        @apply bg-slate-900 border-gray-700 text-gray-400
    }
    .dark .btn-action-with-icon:hover {
        @apply bg-slate-800 text-white
    }
    .dark .btn-action-with-icon:focus {
        @apply ring-offset-gray-800
    }
    .dark .btn-action-danger {
        @apply bg-red-950 border-red-900 text-red-200
    }
    .dark .btn-action-danger:hover {
        @apply bg-red-900 text-white
    }
}