/* 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 {

    /* Only the switcher's face is here. Its size, its padding and the size of its glyph are stated in Java, where
       the component is built -- a size is a layout answer and the layout answers live together.

       The centring is the exception, and it is the button's own paint rather than an arrangement of items: a
       fixed square with a single glyph in the middle of it. There is nothing here for a tray to space.

       Selected through the group so this wins on specificity honestly. The properties below once lived in
       BasicWebPage.css, where a page's own `.rspond-header-nav a` rule outranked them and every one of them
       carried `!important` to claw the fight back. */

    .rspond-theme-switcher-group a.rspond-theme-switcher {
        border: none;
        border-radius: var(--rspond-border-radius-medium);
        background: transparent;
        color: var(--rspond-components-text-secondary);
        cursor: pointer;
        transition: all 0.15s ease;
        text-decoration: none;
    }

    .rspond-theme-switcher-group a.rspond-theme-switcher:hover {
        color: var(--rspond-status-warning);
        background: var(--rspond-card-background);
    }

    /* The chooser that appears once there are more than two themes. It is a form control in a header, so it is
       sized down from the standard control height rather than wearing it. */
    .rspond-theme-switcher-group .rspond-form-select {
        padding: 2px 26px 2px 8px;
        font-size: var(--rspond-font-size-small);
    }
}