/* Shared field interaction contract. The named layer gives these narrowly
 * scoped states precedence over legacy product overrides, including important
 * declarations, without changing product layout, density, or field contents. */
@layer aeyloo-field-interactions {
    .aeyloo-ui-fields :where(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea, [contenteditable="true"], [role="combobox"], .aeyloo-ui-field-surface):where(:not(:disabled, [readonly], [aria-disabled="true"], [aria-readonly="true"], [hidden], [class*="sr-only"], [class*="visually-hidden"], .aeyloo-ui-field-surface *)):where(:not(.aeyloo-ui-field-surface:has(:is(input, select, textarea):is(:disabled, [readonly], [aria-disabled="true"], [aria-readonly="true"])))) {
        --aeyloo-ui-field-state-border: initial;
        --aeyloo-ui-field-state-shadow: initial;
        --aeyloo-ui-field-state-outline: initial;
        --aeyloo-ui-field-selected-border: var(--aeyloo-field-active-border, var(--ax-color-brand, #15b010));
        --aeyloo-ui-field-selected-shadow: var(--aeyloo-field-active-shadow, 0 0 0 4px color-mix(in srgb, var(--ax-color-brand, #15b010) 14%, transparent));
        border-width: var(--aeyloo-ui-field-border-width, 1px) !important;
        border-style: solid !important;
        border-color: var(--aeyloo-ui-field-state-border, var(--aeyloo-ui-field-rest-border, transparent)) !important;
        box-shadow: var(--aeyloo-ui-field-state-shadow, revert-layer) !important;
        outline: var(--aeyloo-ui-field-state-outline, revert-layer) !important;
    }

    .aeyloo-ui-fields :where(input, select, textarea, [contenteditable="true"], [role="combobox"], .aeyloo-ui-field-surface):is(:hover, :focus-within, :active, [aria-expanded="true"]),
    .aeyloo-ui-fields :where(details[open]) > .aeyloo-ui-field-surface {
        --aeyloo-ui-field-state-border: var(--aeyloo-ui-field-selected-border);
        --aeyloo-ui-field-state-shadow: var(--aeyloo-ui-field-autofill-inset, 0 0 0 0 transparent);
    }

    .aeyloo-ui-fields :where(input, select, textarea, [contenteditable="true"], [role="combobox"], .aeyloo-ui-field-surface):is(:focus-within, :active, [aria-expanded="true"]),
    .aeyloo-ui-fields :where(details[open]) > .aeyloo-ui-field-surface {
        --aeyloo-ui-field-state-shadow: var(--aeyloo-ui-field-autofill-inset, 0 0 0 0 transparent), var(--aeyloo-ui-field-selected-shadow);
        --aeyloo-ui-field-state-outline: none;
    }

    .aeyloo-ui-fields :is([aria-invalid="true"], .is-invalid, .aeyloo-ticket-field-invalid, [aria-invalid="true"] :where(input, select, textarea), .is-invalid :where(input, select, textarea), .aeyloo-ui-field-surface:has([aria-invalid="true"], .is-invalid, .aeyloo-ticket-field-invalid)) {
        --aeyloo-ui-field-rest-border: var(--aeyloo-ui-critical, #b42318);
        --aeyloo-ui-field-selected-border: var(--aeyloo-ui-critical, #b42318);
        --aeyloo-ui-field-selected-shadow: 0 0 0 4px color-mix(in srgb, var(--aeyloo-ui-critical, #b42318) 14%, transparent);
    }

    .aeyloo-ui-fields :is(input:autofill, input:-webkit-autofill) {
        --aeyloo-ui-field-autofill-inset: inset 0 0 0 1000px var(--aeyloo-ui-field-surface-color, var(--aeyloo-ui-surface, #ffffff));
    }

    /* The outer surface owns feedback for compound controls. */
    .aeyloo-ui-fields .aeyloo-ui-field-surface:not(:has(:is(input, select, textarea):is(:disabled, [readonly], [aria-disabled="true"], [aria-readonly="true"]))) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
        border-color: transparent !important;
    }

    .aeyloo-ui-fields .aeyloo-ui-field-surface:not(:has(:is(input, select, textarea):is(:disabled, [readonly], [aria-disabled="true"], [aria-readonly="true"]))) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):is(:hover, :focus, :active) {
        box-shadow: var(--aeyloo-ui-field-autofill-inset, none) !important;
        outline: none !important;
    }

    @media (forced-colors: active) {
        .aeyloo-ui-fields :where(input, select, textarea, [contenteditable="true"], [role="combobox"], .aeyloo-ui-field-surface) {
            --aeyloo-ui-field-rest-border: CanvasText;
        }

        .aeyloo-ui-fields :where(input, select, textarea, [contenteditable="true"], [role="combobox"], .aeyloo-ui-field-surface):is(:hover, :focus-within, :active, [aria-expanded="true"]),
        .aeyloo-ui-fields :where(details[open]) > .aeyloo-ui-field-surface {
            --aeyloo-ui-field-selected-border: Highlight;
        }

        .aeyloo-ui-fields :where(input, select, textarea, [contenteditable="true"], [role="combobox"], .aeyloo-ui-field-surface):is(:focus-within, :active, [aria-expanded="true"]),
        .aeyloo-ui-fields :where(details[open]) > .aeyloo-ui-field-surface {
            --aeyloo-ui-field-state-outline: 2px solid Highlight;
        }
    }
}