select, ::picker(select) { appearance: base-select }

input:not([type="radio"], [type="checkbox"], [type="range"]), select, textarea {
    inline-size: 100%;
    border: 1px solid var(--border-field);
    border-radius: 0.25rem;
    padding: 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    background-color: var(--surface-field);
    color: var(--text-on-field);
    transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing);
    outline-offset: -1px;

    &:focus-visible {
        outline: 2px solid var(--status-warning);
        border-color: var(--status-warning);
    }

    &:focus:not(:focus-visible) {
        outline: none;
        border-color: var(--status-warning);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--status-warning) 10%, transparent);
    }

    &:disabled {
        background-color: var(--surface-muted);
        color: var(--text-on-field-subtle);
        cursor: not-allowed;
    }

    &:hover:not(:disabled) { cursor: pointer }
    &:user-valid:required { border-color: var(--status-success) }
    &:user-invalid:required { border-color: var(--status-danger) }
}

.field {
    display: grid;

    .help-text {
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-block-start: 0.25rem;
        min-height: 1lh;
    }

    .error-list {
        list-style: none;
        margin: 0.25rem 0 0.5rem;
        padding: 0 0 0 0.75rem;
        font-size: 0.75rem;
        color: var(--status-danger-text);
    }

    > .field__icon {
        grid-area: 1 / 1;
        place-self: center end;
        margin-inline-end: 0.75rem;
        block-size: var(--icon-sm);
        color: var(--text-on-field-subtle);
        pointer-events: none;
    }

    &:has(> .field__icon) > input {
        grid-area: 1 / 1;
        padding-inline-end: calc(0.75rem + var(--icon-sm) + 0.5rem);
    }

    > input[type="search"]::-webkit-search-cancel-button { appearance: none }

    &::after {
        grid-area: 2 / 1;
        place-self: center end;
        margin-inline-end: 0.75rem;
    }

    &:has(input:is([type="date"], [type="datetime-local"], [type="time"], [type="number"])) { &::after { margin-inline-end: 2.25rem } }

    &:has(:is(input, textarea):required:invalid:not(:user-invalid)):not(:has(.error-list)) {
        &::after {
            content: "✱" / "";
            color: var(--status-warning);
            font-size: 0.75rem;
        }
    }

    &:has(:is(input, textarea):user-valid:required) {
        > label { color: var(--status-success) }
        &::after {
            content: "✓" / "";
            color: var(--status-success);
        }
    }

    &:has(:is(input, textarea):user-invalid:required) {
        > label { color: var(--status-danger) }
        &::after {
            content: "✗" / "";
            color: var(--status-danger);
        }
    }

    &:has(.error-list) {
        > label { color: var(--status-danger) }
        :is(input, textarea, select) { border-color: var(--status-danger) }
        &::after {
            content: "✗" / "";
            color: var(--status-danger);
        }
    }

    &.label--floating {
        > input, > select, > textarea {
            grid-area: 1 / 1;
            align-self: center;
        }
        &::after { grid-row: 1 }
        .error-list, .help-text { grid-row: 2 }

        > label {
            z-index: 1;
            grid-area: 1 / 1;
            place-self: start;
            position: relative;
            inset-block-start: 50%;
            transform: translateY(-50%);
            margin-inline-start: 0.75rem;
            padding: 0 0.25rem;
            border-radius: 0.5rem;
            color: var(--text-on-field-subtle);
            pointer-events: none;
            transition: inset-block-start var(--transition-duration) var(--transition-timing), font-size var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing);
        }

        &:has(.input--compact) > label {
            font-size: 0.75rem;
            margin-inline-start: 0.5rem;
        }

        &:has(:is(input, textarea):is(:focus, :not(:placeholder-shown), :autofill, :-webkit-autofill)) > label,
        &:has(> select) > label {
            inset-block-start: 0;
            font-size: 0.75rem;
            background: var(--surface-field);
        }

        &[data-prefix] {
            input { padding-inline-start: 2.5rem }

            &::before {
                z-index: 1;
                grid-area: 1 / 1;
                place-self: center start;
                margin-inline-start: 0.75rem;
                content: attr(data-prefix);
                color: var(--text-on-field-subtle);
                opacity: 0;
                pointer-events: none;
                transition: opacity var(--transition-duration) var(--transition-timing);
            }

            &:has(input:is(:focus, :not(:placeholder-shown)))::before { opacity: 1 }
        }
    }
}

input[type="range"] {
    inline-size: 100%;
    padding: 0.5rem 0;
}

input.input--compact {
    block-size: 2rem;
    font-size: 0.75rem;
    padding-inline: 0.5rem;
    line-height: 1.2;
}

select.input--compact {
    block-size: 2rem;
    min-inline-size: max-content;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    align-items: center;
}

label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    input[type="checkbox"] {
        inline-size: 1.25rem;
        block-size: 1.25rem;
    }
}

.form--on-colour {
    .field:has(> label > input[type="checkbox"]) > .help-text { margin-inline-start: calc(1.25rem + 0.75rem) }

    input[type="checkbox"] {
        position: relative;
        appearance: none;
        margin: 0;
        inline-size: 1.25rem;
        block-size: 1.25rem;
        border: 2px solid var(--text-primary);
        border-radius: 0.25rem;
        background: transparent;

        &:checked {
            border-color: var(--action-selected);
            background: var(--action-selected);
        }

        &:checked::before {
            content: "";
            position: absolute;
            inset-block-start: 0.375rem;
            inset-inline-start: 0.4375rem;
            inline-size: 0.25rem;
            block-size: 0.5rem;
            border: solid var(--surface-page);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
    }

    .error-list li::before {
        content: "";
        display: inline-block;
        inline-size: 1.25em;
        block-size: 1.25em;
        margin-inline-end: 0.5rem;
        vertical-align: -0.25em;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16h.01' /%3E %3Cpath d='M12 8v4' /%3E %3Cpath d='M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z' /%3E%3C/svg%3E") center / contain no-repeat;
    }
}