// Button

.btn {
    @apply border border-transparent bg-gray-600 text-white font-semibold py-2 px-4 shadow-sm rounded cursor-pointer;

    &:hover {
        @apply text-white bg-gray-800 transition-all duration-300;
    }

    svg {
        @apply w-4 fill-current mr-2 inline;
    }

    &.svg {
        @apply px-2;

        svg {
            @apply mr-0;
        }
    }
}

.btn-primary {
    @extend .btn;
    @apply bg-blue-600 border-blue-600;

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

.btn-secondary {
    @extend .btn;
    @apply bg-blue-400;

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

.btn-alert {
    @extend .btn;
    @apply bg-red border-red;

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

.btn-success {
    @extend .btn;
    @apply bg-green border-green;

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