@layer components {
    /* The control's inner metrics, so a field fits the control height in
       both densities (base.css). */
    :root {
        --control-padding: 0.5rem;
        --control-input-block-size: 1.5rem;
        --control-input-margin: 0.25rem;
        --control-accessory-size: 2rem;
    }

    /* A standalone field: a label above a rounded rectangle, with an
       Apple footer for help or an error below. With touch it is a
       tertiary fill with no border; in compact density it is the system
       background with a hairline and a faint inner shadow, and a tint
       focus ring. */
    .field {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 0.375rem;
    }

    .field__label {
        color: var(--label);
        font-size: var(--font-size-subheadline);
        font-weight: 600;
    }

    .field__control {
        align-items: center;
        background-color: var(--tertiary-system-fill);
        border-radius: 0.625rem;
        cursor: text;
        display: flex;
        flex-direction: row;
        font-size: var(--font-size-body);
        gap: 0.5rem;
        min-block-size: var(--control-block-size);
        padding: var(--control-padding);
        transition: box-shadow 150ms ease;
    }

    .field__control input,
    .field__control select,
    .field__control textarea {
        background-color: transparent;
        border: none;
        color: inherit;
        flex-grow: 1;
        font: inherit;
        height: var(--control-input-block-size);
        line-height: var(--control-input-block-size);
        margin-block: var(--control-input-margin);
        outline: none;
        padding-inline: 0.5rem;
    }

    /* A composed control, such as a rich text editor, fills the frame. */
    .field__control > .field__fill {
        flex-grow: 1;
        min-inline-size: 0;
    }

    .field__control:has(select) {
        cursor: pointer;
    }

    .field__leading,
    .field__trailing {
        align-self: end;
        color: var(--secondary-label);
        display: grid;
        height: var(--control-accessory-size);
        line-height: 1;
        place-content: center;
        width: var(--control-accessory-size);
    }

    .field__help,
    .field__error {
        color: var(--secondary-label);
        font-size: var(--font-size-footnote);
    }

    .field__error {
        color: var(--system-red);
    }

    @container style(--density: compact) {
        :root .field__control {
            background-color: light-dark(
                var(--system-background),
                var(--quaternary-system-fill)
            );
            border-radius: 0.375rem;
            box-shadow:
                inset 0 0 0 1px var(--hairline),
                inset 0 1px 1px
                    light-dark(oklch(0% 0 0deg / 6%), oklch(0% 0 0deg / 30%));

            &:focus-within {
                box-shadow:
                    inset 0 0 0 1px var(--hairline),
                    0 0 0 0.1875rem oklch(from var(--tint) l c h / 50%);
            }
        }
    }
}