.button {
    @apply rounded py-3 px-4 text-sm leading-4 transition duration-150 ease-in-out font-semibold;
}

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

.button-primary {
    @apply bg-blue-500 text-white;

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

.button-block {
    @apply block w-full;
}

.button-danger {
    @apply bg-red-500 text-white;

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

.button-secondary {
    @apply bg-gray-100;

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

.button-link {
    @apply text-blue-600;

    &:hover {
        @apply text-blue-700 underline;
    }

    &:focus {
        @apply outline-none underline;
    }
}