/* 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 {
    /* The top decorator is where a field's label sits. Only its inset lives here: the label's typography is the
       theme's field-label look, which the label itself wears, so a detail view's key and a form's label are one
       vocabulary rather than two rules that happen to agree today. */
    .rspond-form-field-decorator-top {
        padding-top: 8px;
        padding-bottom: 6px;
    }

    /* An unlabeled field pays no label inset -- the band is empty, and the room would read as a spacing
       mistake in whatever composed the field. Java writes the class, because only the field knows it has
       no label to inset. */
    .rspond-form-field-decorator-top.rspond-form-field-unlabeled {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* A displaying field puts a label where its control would be, in the same box the control was resolved to. The
       box being identical is what keeps the form still across a flip, but the box alone is not enough: an input
       centres its own text and insets it past its border, and a bare label does neither, so the text would sit high
       and hard against the left edge even though nothing had moved. The padding and the transparent border repeat
       the control's own geometry so the text lands exactly where it was.

       Only the inset lives here. Centring is the tray's layout, in Java, because that is where alignment belongs
       and because a line-height matched to the control metric -- which is what this held first -- cannot follow a
       field that states a display height of its own. */
    .rspond-form-display {
        padding: 0 12px;
        border: var(--rspond-border-width) solid transparent;
        font-size: var(--rspond-font-size-medium);
        color: var(--rspond-components-text-primary);
    }

}