/* The layer order is restated in every SDK stylesheet, because the first declaration the browser sees is
   the one that counts and stylesheet load order varies by page. Consumer CSS stays unlayered and so
   always wins. */
@layer rspond.reset, rspond.vendor, rspond.document, rspond.component, rspond.theme, rspond.look;

@layer rspond.component {

    /* One custom property carries the whole severity, set once on the row and read by the badge, the idle glyph and
       the text. Painting each of the three from its own rule would let them disagree -- an amber glyph beside a red
       badge is the exact confusion the worst-status rule exists to prevent -- and would need four rules per element
       instead of one. These are this component's classes alone: the marks in the popover are SeverityMarks, which
       paint themselves. The magnitudes stay in the theme; only the choice of which token lives here. */
    .rspond-message-none {
        --rspond-message-color: var(--rspond-components-text-muted);
    }

    /* Green rather than the informational blue, because in a form an informational message almost always means the
       thing the reader was doing worked. The success token rather than the brand green: it is defined per theme, so
       it stays legible on a dark background where a fixed brand colour would not. */
    .rspond-message-info {
        --rspond-message-color: var(--rspond-status-success);
    }

    .rspond-message-warning {
        --rspond-message-color: var(--rspond-status-warning);
    }

    .rspond-message-error {
        --rspond-message-color: var(--rspond-status-danger);
    }

    .rspond-message-badge {
        background: var(--rspond-message-color);
        color: var(--rspond-button-primary-text);
        border-radius: 50%;
        font-size: var(--rspond-font-size-small);
        font-weight: bold;
        font-family: var(--rspond-fonts-family);
    }

    /* A step above body weight and well short of bold, because the row already has three ways of raising its voice
       before a word is read: the severity glyph, the coloured badge, and the colour on the text itself. Bold on top of
       all three made a single warning shout where the field labels beside it only speak -- the marks carry the
       emphasis, so the sentence only has to stand slightly clear of the labels around it.

       The clipping is what lets this row live in a title band or a toolbar without pushing anything: the text is the
       one part of the row that yields, so it is the part that has to be able to end in an ellipsis rather than
       overflow. It shortens only when there is not room, and the full sentence is a click away in the popover. */
    .rspond-status-view-message-text {
        color: var(--rspond-message-color);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rspond-status-view-glyph {
        color: var(--rspond-message-color);
    }

    /* A row that opens something announces itself by the cursor, and only while there is something to open -- an idle
       view is a label, not a control, and a pointer over it would promise a panel that does not exist. */
    .rspond-status-view-message:has(.rspond-message-badge) {
        cursor: pointer;
    }
}