.alert {
    padding: 16px;
    margin: 24px 0px;
    font-size: 14px;
    color: $darkgray;
    width: 100%;
    box-sizing: border-box;

    &.is-critical {
        border-left: 10px solid $pink;
        background-color: rgba($pink, 0.05);

        h1, h2, h3, h4, h5, h6 {
            color: $pink;
        }
    }

    &.is-important {
        border-left: 10px solid $orange;
        background-color: rgba($orange, 0.05);

        h1, h2, h3, h4, h5, h6 {
            color: $orange;
        }
    }

    &.is-helpful {
        border-left: 10px solid $pink;
        background-color: rgba($pink, 0.05);

        h1, h2, h3, h4, h5, h6 {
            color: $pink;
        }
    }

    > * {
        margin: 0;
        padding: 8px 16px;
    }
}