.o-ui-message {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: var(--o-ui-sp-2) var(--o-ui-sp-3) var(--o-ui-sp-2) var(--o-ui-sp-8);
    width: 100%;
    height: max-content;
    border-radius: var(--o-ui-br-3);
    position: relative;
    gap: var(--o-ui-sp-2);
}

.o-ui-message-dismissable {
    padding-right: var(--o-ui-sp-10);
}

/* ICON */
.o-ui-message-icon {
    position: absolute;
    left: var(--o-ui-sp-3);
    top: calc(var(--o-ui-sp-2) + calc(var(--o-ui-sp-2) / 2));
    margin-top: 0.125rem;
}

.o-ui-message-content {
    flex-grow: 1;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    padding-top: calc(var(--o-ui-sp-3) / 2);
    padding-bottom: calc(var(--o-ui-sp-3) / 2);
    min-width: 0;
    flex-basis: var(--o-ui-sz-14);
}

/* ACTION */
.o-ui-message-action {
    /* Ugly fix unti Chroma have decent support for height: min-content + absolute */
    height: auto !important;
    flex-shrink: 0;
    max-width: 180px;
}

/* DISMISS */
.o-ui-message-dismiss {
    position: absolute;
    right: var(--o-ui-sp-3);
    top: var(--o-ui-sp-2);
}

/* VARIANT | INFORMATIVE */
.o-ui-message-informative {
    background-color: var(--o-ui-bg-alias-accent-light);
}

/* VARIANT | WARNING */
.o-ui-message-warning {
    background-color: var(--o-ui-bg-alias-warning-light);
}

/* VARIANT | POSITIVE */
.o-ui-message-positive {
    background-color: var(--o-ui-bg-alias-success-light);
}

/* VARIANT | NEGATIVE */
.o-ui-message-negative {
    background-color: var(--o-ui-bg-alias-alert-light);
}