/* A search field's "×" (field-clear.js), drawn as the catalogue's (.cil-ctl-clear in page.css): round,
   quiet, red when pointed at. The browser's own × is hidden where ours stands. */
.cil-field-clear {
    display: inline-grid; place-items: center; flex: none; align-self: center;
    width: 24px; height: 24px; margin: 0 4px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--cil-black-regular-7);
    cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.cil-field-clear[hidden] { display: none; }
/* Doubled class: the header unpaints every button in it on hover (.cil-hdr button:hover). */
button.cil-field-clear.cil-field-clear:is(:hover, :focus-visible) { background: var(--cil-red-light-2); color: var(--cil-red-dark-1); }
.cil-field-clear:focus-visible { outline: 2px solid var(--cil-red-dark-1); outline-offset: 1px; }
.cil-field-clear svg { display: block; }
.cil-field-clear-host { display: flex; align-items: center; }
.cil-field-clear-host > input { flex: 1; min-width: 0; }
/* Inside a field drawn as its own box, at the end of the words (field-clear.js makes room for it). */
.cil-field-clear-host--inside { position: relative; }
.cil-field-clear--inside { position: absolute; inset-block-start: 50%; inset-inline-end: 8px; margin: 0; transform: translateY(-50%); }
/* The old course search (institution and local-authority pages) paints every button in its pill as
   its submit magnifier (styles-rtl.css .newCatalogSearchText .textFieldWrapper button): not this one. */
.newCatalogSearchText .textFieldWrapper button.cil-field-clear { width: 24px; padding: 0; background: transparent; cursor: pointer; }
.newCatalogSearchText .textFieldWrapper button.cil-field-clear:is(:hover, :focus-visible) { background: var(--cil-red-light-2); }
input[data-cil-clear-field]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

@media (prefers-reduced-motion: reduce) {
    .cil-field-clear { transition: none; }
}