@require '../../../node_modules/@informatica/archipelago-icons/dist/archipelago_icons.css';

.message-box {
    &__title {
        font-size: messagebox--title--font-size;
        font-weight: messagebox--title--font-weight;
        display: flex;
        align-items: center;
    }
    &__icon {
        font-size: messagebox--icon--font-size;
        margin-right: 0.5em;
        &--error {
            color: messagebox--icon--error--color;
            @extend .aicon;
            &:before { @extend .aicon__error:before; }
        }
        &--info {
            color: messagebox--icon--info--color;
            @extend .aicon;
            &:before { @extend .aicon__info:before; }
        }
        &--warn {
            color: messagebox--icon--warn--color;
            @extend .aicon;
            // &:before { @extend .aicon__warn:before; }
        }
        &--success {
            color: messagebox--icon--success--color;
            @extend .aicon;
            // &:before { @extend .aicon__success:before; }
        }
    }
    &__details {
        background: white;
        padding: 1em;
        overflow: auto;
        max-height: 300px;
        &__button { color: color--blue--4; }
        &__icon {
            transform: rotate(-90deg);
            // transition: transform 0.25s ease-in-out;
            color: black;
            @extend .aicon;
            &:before { @extend .aicon__expand-collapse:before; }
            &--expanded { transform: rotate(0deg); }
        }
    }
}