@layer components {
    /* Text inputs */
    .input {
        accent-color: var(--input-accent-color, var(--color-ink));
        background-color: var(--input-background, transparent);
        border-radius: var(--input-border-radius, 0.5em);
        border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
        color: var(--input-color, var(--color-ink));
        font-size: max(16px, 1em);
        inline-size: 100%;
        line-height: inherit;
        max-inline-size: 100%;
        padding: var(--input-padding, 0.5em 0.8em);
        resize: none;

        &:autofill,
        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--color-ink);
            -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
        }

        &:where(:focus) {
            --focus-ring-offset: -1px;
        }

        &[readonly] {
            --focus-ring-size: 0;
        }

        &[autocomplete='one-time-code'] {
            --input-spacing: 0.5em;

            font-family: var(--font-mono);
            font-size: var(--text-large);
            font-weight: 900;
            inline-size: 18ch;
            letter-spacing: 1ch;
            min-inline-size: 18ch;
            text-align: center;
        }

        &[type='number'] {
            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        }

        /* Target mobile Safari only */
        @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
            @media (hover: none) {
                font-size: max(16px, 1em) !important;
            }
        }
    }

    select.input {
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
        background-position: center right 0.8em;
        background-repeat: no-repeat;
        background-size: 0.5em;
        block-size: calc(1lh + 1em + var(--input-border-size, 1px) * 2);
        padding-inline-end: 2em;

        @media screen and (prefers-color-scheme: dark) {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
        }
    }

    .input--select {
        --input-border-radius: 2em;
        --input-padding: 0.5em 1.8em 0.5em 1.2em;

        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
        background-size: 0.5em;
        background-position: center right 0.9em;
        background-repeat: no-repeat;
        text-align: start;

        @media screen and (prefers-color-scheme: dark) {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
        }

        option {
            background-color: var(--color-canvas);
            color: var(--color-ink);
        }
    }

    .input--textarea {
        --input-padding: 0;

        line-height: inherit;
        min-block-size: calc(3lh + (2 * var(--input-padding)));
        min-inline-size: 100%;
        padding-block: var(--input-padding);
        padding-inline: calc(var(--input-padding) + calc((1lh - 1ex) / 2));

        @supports (field-sizing: content) {
            field-sizing: content;
            max-block-size: calc(3lh + (2 * var(--input-padding)));
            min-block-size: calc(1lh + (2 * var(--input-padding)));
        }
    }

    /* Inline form validation errors (used by server-rendered forms and
     * client-side validation in background_upload_controller) */
    .form-error {
        color: var(--color-negative);
        font-size: 0.875em;

        p {
            margin: 0;
        }
    }
}