.btn {
    @apply relative inline-flex items-center justify-center overflow-hidden rounded-lg border font-semibold;

    &:disabled {
        @apply opacity-50 cursor-not-allowed;
    }

    &:focus-visible {
        @apply outline outline-2 outline-offset-2;
    }

    &.btn-xs {
        @apply gap-x-1.5 px-4 py-1 text-sm;
    }

    &.btn-sm {
        @apply gap-x-1.5 px-4 py-1.5 text-sm;
    }

    &.btn-md {
        @apply gap-x-1.5 px-6 py-2 text-sm;
    }

    &.btn-lg {
        @apply gap-x-2 px-8 py-2.5 text-sm;
    }

    &.btn-xl {
        @apply gap-x-2.5 px-8 py-3 text-base;
    }

    &.btn-primary {
        @apply border-blue-600 bg-blue-600 text-white;

        &:hover {
            @apply bg-blue-700;
        }

        &:focus-visible {
            @apply outline-blue-700;
        }
    }

    &.btn-dark {
        @apply border-gray-900 bg-gray-900 text-white;

        &:hover {
            @apply bg-gray-700;
        }

        &:focus-visible {
            @apply outline-gray-700;
        }
    }

    &.btn-secondary {
        @apply border-gray-300 bg-white text-gray-900;

        &:hover {
            @apply bg-gray-100;
        }

        &:focus-visible {
            @apply outline-gray-100;
        }
    }

    &.btn-secondary-darker {
        @apply border-gray-300 bg-gray-300 text-gray-700;

        &:hover {
            @apply bg-gray-200;
        }

        &:focus-visible {
            @apply outline-gray-200;
        }
    }

    &.btn-success {
        @apply border-green-600 bg-green-600 text-white;

        &:hover {
            @apply bg-green-500;
        }

        &:focus-visible {
            @apply outline-green-500;
        }
    }

    &.btn-danger {
        @apply border-red-600 bg-red-600 text-white;

        &:hover {
            @apply bg-red-500;
        }

        &:focus-visible {
            @apply outline-red-500;
        }
    }

    &.btn-warning {
        @apply border-yellow-600 bg-yellow-600 text-white;

        &:hover {
            @apply bg-yellow-500;
        }

        &:focus-visible {
            @apply outline-yellow-500;
        }
    }
}