.o-ui-message {
    display: flex;
    align-items: flex-start;
    padding: var(--o-ui-global-scale-charlie);
    width: 100%;
    height: max-content;
    border-radius: var(--o-ui-shape-rounded);
    padding-top: var(--o-ui-global-scale-bravo);
    padding-bottom: var(--o-ui-global-scale-bravo);
}

/* ICON */
.o-ui-message-icon {
    margin-top: calc(var(--o-ui-global-scale-bravo) / 2);
    margin-bottom: calc(var(--o-ui-global-scale-bravo) / 2);
    margin-right: var(--o-ui-global-scale-bravo);
    flex-shrink: 0;
}

.o-ui-message-content {
    flex-grow: 1;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    padding-top: calc(var(--o-ui-global-scale-charlie) / 2);
    padding-bottom: calc(var(--o-ui-global-scale-charlie) / 2);
}

/* ACTION */
.o-ui-message-action {
    margin-left: var(--o-ui-global-scale-charlie);
    /* Ugly fix unti Chroma have decent support for height: min-content + absolute */
    height: auto !important;
}

/* DISMISS */
.o-ui-message-dismiss {
    margin-left: var(--o-ui-global-scale-bravo);
}

/* TONE | INFORMATIVE */
.o-ui-message-informative {
    background-color: var(--o-ui-alias-background-info-1);
    color: var(--o-ui-alias-text-info-1);
}

.o-ui-message-informative .o-ui-message-icon {
    fill: var(--o-ui-alias-icon-info-1);
}

/* TONE | WARNING */
.o-ui-message-warning {
    background-color: var(--o-ui-alias-background-warning-2);
    color: var(--o-ui-alias-text-warning-2);
}

.o-ui-message-warning .o-ui-message-icon {
    fill: var(--o-ui-alias-icon-warning-2);
}

/* TONE | POSITIVE */
.o-ui-message-positive {
    background-color: var(--o-ui-alias-background-positive-2);
    color: var(--o-ui-alias-text-positive-2);
}

.o-ui-message-positive .o-ui-message-icon {
    fill: var(--o-ui-alias-icon-positive-2);
}

/* TONE | NEGATIVE */
.o-ui-message-negative {
    background-color: var(--o-ui-alias-background-negative-2);
    color: var(--o-ui-alias-text-negative-2);
}

.o-ui-message-negative .o-ui-message-icon {
    fill: var(--o-ui-alias-icon-negative-2);
}