.btn {
    @apply px-3 py-2 uppercase no-underline text-sm items-center justify-center bg-primary-700 rounded;

    &.btn-sm {
        @apply text-xs px-2 py-1;
        svg {
            @apply w-3 h-3 text-primary-100 flex-none;
        }
    }
    &.btn-primary {
        @apply bg-primary-700 text-primary-300;
        &:not(.disabled):hover {
            @apply bg-primary-500 text-primary-100;
        }
    }
    &.btn-primary-light {
        @apply bg-primary-600 text-primary-200;
        &:not(.disabled):hover {
            @apply bg-primary-500 text-primary-100;
        }
    }
    &.btn-warning {
        @apply bg-yellow-700 text-yellow-300;
        &:not(.disabled):hover {
            @apply bg-yellow-500 text-yellow-100;
        }
    }
    &.btn-info {
        @apply bg-blue-700 text-blue-300;
        &:not(.disabled):hover {
            @apply bg-blue-500 text-blue-100;
        }
    }
    &.btn-danger {
        @apply bg-red-400 text-red-100 hover:bg-red-300;
        &:not(.disabled):hover {
            @apply bg-red-500 text-red-100;
        }
    }

    &.label {
        @apply py-0 h-6 flex justify-center items-center rounded-full leading-none transition-all normal-case;
    }

    &.icon {
        @apply p-0 flex justify-center items-center w-6 h-6;
        svg {
            @apply w-3 h-3 flex-none;
        }
    }

    &.disabled {
        @apply opacity-50;
    }
}