/* ===== OO MessageBar =====
   Vier Severity-Stufen: info, success, warning, error.
   Farbiger linker Balken + passendes Icon.
   ========================= */

.oo-messagebar {
    display: flex;
    align-items: flex-start;
    gap: var(--oo-space-2);
    padding: 0.75rem 1rem;
    border-radius: var(--oo-radius-sm);
    border-left: 4px solid;
    font-family: var(--oo-font-family);
    font-size: var(--oo-font-size-md);
    color: var(--oo-color-text);
    line-height: 1.5;
}

/* ── Icon ──────────────────────────────────────────────────────────── */

.oo-messagebar__icon {
    font-size: 1.25em;
    line-height: 1;
    margin-top:0.1rem
}

/* ── Content ───────────────────────────────────────────────────────── */

.oo-messagebar__content {
    flex: 1;
    min-width: 0;
}

.oo-messagebar__title {
    display: block;
    font-weight: 600;
    margin-bottom: 0.15em;
}

/* ── Close Button ──────────────────────────────────────────────────── */

.oo-messagebar__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--oo-radius-sm);
    color: var(--oo-color-text-subtle);
    padding: 0;
    transition: background var(--oo-transition), color var(--oo-transition);
}

    .oo-messagebar__close .oo-icon {
        font-size: 1rem;
    }

    .oo-messagebar__close:hover {
        background: rgba(0, 0, 0, 0.06);
        color: var(--oo-color-text);
    }

    .oo-messagebar__close:focus-visible {
        outline: 2px solid var(--oo-primary);
        outline-offset: 1px;
    }

/* ── Severity: Info ────────────────────────────────────────────────── */

.oo-messagebar--info {
    background: var(--oo-info-lighter);
    border-left-color: var(--oo-info);
}

    .oo-messagebar--info .oo-messagebar__icon {
        color: var(--oo-info);
    }

/* ── Severity: Success ─────────────────────────────────────────────── */

.oo-messagebar--success {
    background: var(--oo-success-lighter);
    border-left-color: var(--oo-success);
}

    .oo-messagebar--success .oo-messagebar__icon {
        color: var(--oo-success);
    }

/* ── Severity: Warning ─────────────────────────────────────────────── */

.oo-messagebar--warning {
    background: var(--oo-warning-lighter);
    border-left-color: var(--oo-warning);
}

    .oo-messagebar--warning .oo-messagebar__icon {
        color: var(--oo-warning-dark);
    }

/* ── Severity: Error ───────────────────────────────────────────────── */

.oo-messagebar--error {
    background: var(--oo-danger-lighter);
    border-left-color: var(--oo-danger);
}

    .oo-messagebar--error .oo-messagebar__icon {
        color: var(--oo-danger);
    }