/* 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 {
    /* @rspond-css-out-of-flow-exemption A containing block for the box's glyph, standing just before the control.
       Zero width by construction: its only child is out of flow, so it takes no room from the box and the control
       starts exactly where it would without a glyph. */
    .rspond-text-box-icon-anchor {
        position: relative;
    }

    /* @rspond-css-out-of-flow-exemption The glyph is painted inside the control that follows its anchor, centred
       on the box's own height by transform so it stays centred at whatever height the box is given. It ignores the
       pointer, so clicking the glyph focuses the box beneath it rather than swallowing the click. */
    .rspond-text-box-icon-anchor .rspond-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: var(--rspond-components-text-muted);
    }
}