.btn {
    @apply inline-flex items-center gap-x-2 rounded border border-transparent px-3 py-1.5 text-sm font-normal text-white transition duration-150 ease-in-out hover:no-underline disabled:cursor-default disabled:opacity-60 justify-center;
}

.btn-block {
    @apply block;
}

.btn-xs {
    @apply px-2 py-0.5 text-xxs;
}

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

.btn-lg {
    @apply px-4 py-1.5 text-base;
}

.btn-xl {
    @apply px-5 py-2 text-lg;
}

.btn-primary {
    @apply border-primary bg-primary text-white hover:border-primary-600 hover:bg-primary-600 focus:border-primary-600 focus:bg-primary-600 disabled:hover:border-primary disabled:hover:bg-primary disabled:focus:border-primary disabled:focus:bg-primary;
}
.btn-secondary {
    @apply border-secondary bg-secondary text-white hover:border-secondary-500 hover:bg-secondary-500 focus:border-secondary-500 focus:bg-secondary-500 disabled:hover:border-secondary disabled:hover:bg-secondary disabled:focus:border-secondary disabled:focus:bg-secondary;
}
.btn-success {
    @apply border-success bg-success text-white hover:border-success-700 hover:bg-success-700 focus:border-success-700 focus:bg-success-700 disabled:hover:border-success disabled:hover:bg-success disabled:focus:border-success disabled:focus:bg-success;
}
.btn-warning {
    @apply border-warning bg-warning text-white hover:border-warning-600 hover:bg-warning-600 focus:border-warning-600 focus:bg-warning-600 disabled:hover:border-warning disabled:hover:bg-warning disabled:focus:border-warning disabled:focus:bg-warning;
}
.btn-info {
    @apply border-info bg-info text-white hover:border-info-600 hover:bg-info-600 focus:border-info-600 focus:bg-info-600 disabled:hover:border-info disabled:hover:bg-info disabled:focus:border-info disabled:focus:bg-info;
}
.btn-danger {
    @apply border-danger bg-danger text-white hover:border-danger-600 hover:bg-danger-600 focus:border-danger-600 focus:bg-danger-600 disabled:hover:border-danger disabled:hover:bg-danger disabled:focus:border-danger disabled:focus:bg-danger;
}
.btn-light {
    @apply border-gray bg-gray text-white hover:border-gray-600 hover:bg-gray-600 focus:border-gray-600 focus:bg-gray-600 disabled:hover:border-gray disabled:hover:bg-gray disabled:focus:border-gray disabled:focus:bg-gray;
}

.btn-outline-primary {
    @apply border-primary bg-transparent text-primary hover:border-primary-600 hover:bg-primary-600 hover:text-white focus:border-primary-600 focus:bg-primary-600 focus:text-white;
}
.btn-outline-secondary {
    @apply border-secondary bg-transparent text-secondary hover:border-secondary-500 hover:bg-secondary-500 hover:text-white focus:border-secondary-500 focus:bg-secondary-500 focus:text-white;
}
.btn-outline-success {
    @apply border-success bg-transparent text-success hover:border-success-700 hover:bg-success-700 hover:text-white focus:border-success-700 focus:bg-success-700 focus:text-white;
}
.btn-outline-warning {
    @apply border-warning bg-transparent text-warning hover:border-warning-600 hover:bg-warning-600 hover:text-white focus:border-warning-600 focus:bg-warning-600 focus:text-white;
}
.btn-outline-info {
    @apply border-info bg-transparent text-info hover:border-info-600 hover:bg-info-600 hover:text-white focus:border-info-600 focus:bg-info-600 focus:text-white;
}
.btn-outline-danger {
    @apply border-danger bg-transparent text-danger hover:border-danger-600 hover:bg-danger-600 hover:text-white focus:border-danger-600 focus:bg-danger-600 focus:text-white;
}
.btn-outline-light {
    @apply border-gray-300 bg-transparent text-gray-600 hover:border-gray-200 hover:bg-gray-200 hover:text-gray-900 focus:border-gray-200 focus:bg-gray-200 focus:text-gray-900;
}

.btn-link-primary {
    @apply border-transparent bg-transparent text-primary hover:text-primary-700 focus:text-primary-700;
}
.btn-link-secondary {
    @apply border-transparent bg-transparent text-secondary hover:text-secondary-600 focus:text-secondary-600;
}
.btn-link-success {
    @apply border-transparent bg-transparent text-success hover:text-success-800 focus:text-success-800;
}
.btn-link-warning {
    @apply border-transparent bg-transparent text-warning hover:text-warning-700 focus:text-warning-700;
}
.btn-link-info {
    @apply border-transparent bg-transparent text-info hover:text-info-700 focus:text-info-700;
}
.btn-link-danger {
    @apply border-transparent bg-transparent text-danger hover:text-danger-700 focus:text-danger-700;
}