.alert {
    @apply text-white max-w-full;

    .uhasselt-container {
        @apply flex items-center px-8 py-4;
    }

    .text {
        @apply px-8 w-full;

        h6 {
            @apply font-semibold;
        }
    }

    .icon {
        @apply text-white;
        transition: all 0.3s ease;
    }

    .red {
        @apply bg-red-600;

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

    .black {
        @apply bg-black;

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

    .white {
        @apply bg-white text-red border border-solid border-gray;

        .icon {
            @apply text-red;
        }

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

    .js--clickable {
        cursor: pointer;
    }

    &:hover {
        @apply no-underline;

        .fa-chevron-right {
            transform: translateX(5px);
        }
    }
}