/* 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.look {
    /* The three button faces. In the look layer because that is what they are -- a face a caller asks for by name,
       PrimaryButtonLook and its siblings -- and because the layer stack ranks a look above the document's voice.
       Stated in the component layer instead they lost every element whose voice a theme sets: the `a` rule in
       Typography.css beat them however specific they were, so every button-shaped link painted its label in link
       blue. White-on-green became blue-on-green, a secondary button never once showed the green its theme has
       always specified, and a danger link lost its red, which is the whole point of that face. A <button> was
       unaffected, which is what kept it hidden: the two forms of the same button looked different and only one of
       them was wrong.

       One file for all five registrations -- three link looks and two submit-button looks -- because they are one
       vocabulary and a <button> and an <a> wearing the same face must not drift apart. Wicket deduplicates the
       repeated contribution, as it does for the toggle looks.

       The disabled state is excluded deliberately: a disabled button is the theme's to draw, and brand.css states
       `.rspond-btn.rspond-disabled` with a cue of its own. Claiming it here would outrank that from a higher layer
       and paint a full-strength face on a control nobody may press. */

    .rspond-btn-primary:not(.rspond-disabled) {
        background: var(--rspond-button-primary-background);
        color: var(--rspond-button-primary-text);
        border: var(--rspond-border-width) solid var(--rspond-button-primary-border);
    }

    .rspond-btn-primary:not(.rspond-disabled):hover {
        background: var(--rspond-button-primary-background-hover);
        border-color: var(--rspond-button-primary-background-hover);
        color: var(--rspond-button-primary-text);
    }

    .rspond-btn-secondary:not(.rspond-disabled) {
        background: var(--rspond-button-secondary-background);
        color: var(--rspond-button-secondary-text);
        border: var(--rspond-border-width) solid var(--rspond-button-secondary-border);
    }

    .rspond-btn-secondary:not(.rspond-disabled):hover {
        background: var(--rspond-card-background-hover);
        border-color: var(--rspond-components-text-muted);
    }

    /* Bordered rather than filled, unlike the primary face: a filled red button shouts from across the page and
       invites the click it should be warning about, where a bordered one reads as available-but-costly. The hover
       fill comes from the status background token so every theme's danger stays one colour family. */
    .rspond-btn-danger:not(.rspond-disabled) {
        background: transparent;
        color: var(--rspond-status-danger);
        border: var(--rspond-border-width) solid var(--rspond-status-danger-border);
    }

    .rspond-btn-danger:not(.rspond-disabled):hover {
        background: var(--rspond-status-danger-background);
        border-color: var(--rspond-status-danger);
        color: var(--rspond-status-danger);
    }
}