/* Buttons */

.btn,
.btn-lg,
.btn-sm,
.btn-xs {
    @apply cursor-pointer font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-sm transition active:scale-95;
}

.btn {
    @apply px-3 py-2;
}

.btn-lg {
    @apply px-4 py-3;
}

.btn-sm {
    @apply px-2.5 py-1.5;
}

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

/* Colors */

.btn-primary {
    @apply bg-primary hover:bg-primary/90 focus-visible:outline-primary text-diffcolor;
}

.btn-secondary {
    @apply bg-secondary hover:bg-secondary/90 focus-visible:outline-secondary text-diffcolor;
}

.btn-tertiary {
    @apply bg-tertiary hover:bg-tertiary/90 focus-visible:outline-tertiary text-diffcolor;
}

.btn-danger {
    @apply bg-danger hover:bg-danger/90 focus-visible:outline-danger text-diffcolor;
}

.btn-warning {
    @apply bg-warning hover:bg-warning/90 focus-visible:outline-warning text-diffcolor;
}

.btn-info {
    @apply bg-info hover:bg-info/90 focus-visible:outline-info text-diffcolor;
}

.btn-success {
    @apply bg-success hover:bg-success/90 focus-visible:outline-success text-diffcolor;
}

/* Disabled Buttons */

.btn:disabled,
.btn-lg:disabled,
.btn-sm:disabled,
.btn-xs:disabled {
    @apply opacity-50 cursor-not-allowed pointer-events-none;
}

/* Colors for Disabled States */

.btn-primary:disabled {
    @apply bg-primary/80 text-gray-300;
}

.btn-secondary:disabled {
    @apply bg-secondary/80 text-gray-400;
}

.btn-tertiary:disabled {
    @apply bg-tertiary/80 text-gray-300;
}

.btn-danger:disabled {
    @apply bg-danger/80 text-gray-300;
}

.btn-warning:disabled {
    @apply bg-warning/80 text-gray-400;
}

.btn-info:disabled {
    @apply bg-info/80 text-gray-300;
}

.btn-success:disabled {
    @apply bg-success/80 text-gray-300;
}