/**************************************/
/************** Alerts ****************/
/**************************************/
.alert {
    @apply relative bg-primary shadow-lg my-8 p-6 rounded-lg overflow-hidden;
    transition: box-shadow 0.1s;

    &:hover {
        @apply shadow;
    }

    &.is-info { @apply bg-info; }
    &.is-success { @apply bg-success; }
    &.is-danger { @apply bg-danger; }
    &.is-warning { @apply bg-warning; }

    p {
        @apply pl-8 mb-0 text-white;
    }

    .icon {
        @apply absolute w-16 h-16 opacity-25 font-bold;
        left: -10px;
        top: -10px;
        svg {
            fill: white;
            width: 60px;
            height: 60px;
        }
    }
}