@require '../../../node_modules/@informatica/archipelago-icons/dist/archipelago_icons.css';
@require '../tpl/animate.styl';
@import '../../base/components/messageBubble.styl';

.messagebubble {
    border: messagebubble--border;
    margin: auto;
    min-height: 40px;
    max-height: 60px;
    min-width: 350px;
    max-width: 500px;
    margin-bottom: 10px;
    border-radius: messagebubble--border-radius;
    box-shadow: messagebubble--box-shadow;
    animation-name: fadeInDownBubble;
    animation-duration: messagebubble--animation-duration;
    animation-timing-function: ease-in-out;
    &__text { padding: 15px 15px 15px 0; }
    &__animation {
        &--exiting { animation-name: fadeOutUpBubble; }
    }
    &__icon {
        margin-left: 15px;
        margin-right: 10px;
        width: 20px;
        height: 20px;
    }
    &__icon--error { color: messagebubble--icon--error--color; }
    &__icon--success { color: messagebubble--icon--success--color; }
    &__icon--info { color: messagebubble--icon--info--color; }
    &__icon--warning { color: messagebubble--icon--warning--color; }
    &__close {
        margin-right: 15px;
        margin-left: 20px;
        cursor: pointer;
        @extend .aicon;
        &:before { @extend .aicon__cross:before; }
        &:hover { color: messagebubble--close--hover--color; }
    }
    &--type-success {
        border-color: messagebubble--success--border-color;
        background-color: messagebubble--success--background-color;
    }
    &--type-error {
        border-color: messagebubble--error--border-color;
        background-color: messagebubble--error--background-color;
    }
    &--type-info {
        border-color: messagebubble--info--border-color;
        background-color: messagebubble--info--background-color;
    }
    &--type-warning {
        border-color: messagebubble--warning--border-color;
        background-color: messagebubble--warning--background-color;
    }
}