/* Keep shared text-field states consistent with the application theme. */
body form :is(input, select, textarea):not(:where(
    [type="hidden"], [type="checkbox"], [type="radio"], [type="submit"],
    [type="button"], [type="reset"], [type="file"], [type="range"],
    [type="color"], [type="image"]
)) {
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

@media (hover: hover) {
    body form :is(input, select, textarea):not(:where(
        [type="hidden"], [type="checkbox"], [type="radio"], [type="submit"],
        [type="button"], [type="reset"], [type="file"], [type="range"],
        [type="color"], [type="image"], [readonly], [aria-invalid="true"]
    )):not(:disabled):hover {
        border-color: var(--color-primary-400, #2dd4bf);
    }
}

body form :is(input, select, textarea):not(:where(
    [type="hidden"], [type="checkbox"], [type="radio"], [type="submit"],
    [type="button"], [type="reset"], [type="file"], [type="range"],
    [type="color"], [type="image"]
)):not(:disabled):focus {
    border-color: var(--color-primary, #0d9488);
    background-color: #fff;
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--color-primary-100, #ccfbf1);
}

body form :is(input, select, textarea)[aria-invalid="true"]:not(:disabled):focus {
    border-color: #e11d48;
    box-shadow: 0 0 0 3px #ffe4e6;
}

@media (prefers-reduced-motion: reduce) {
    body form :is(input, select, textarea) {
        transition: none;
    }
}