portal/resources/sass/components/_btn.scss

// Button

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

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

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

    &.svg {
        @apply px-2 inline;

        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;
    }
}

.btn-small {
    @extend .btn;
    @apply text-sm;

    & svg {
        @apply ml-2 mr-0;
    }
}

.arrowUp {
    --transform-rotate: -90deg !important;
}