/* Find and replace, in the note's header (design/v5/V5NoteMeta.dc.html): the field the Find button grows
   into, and the Replace row under the header, opening with the disclosure; matches marked by the Custom
   Highlight API, their lines tinted. */

.find-field { display: flex; align-items: center; gap: 2px; width: calc(var(--nm-find-w, 296px) - 26px); padding-right: 2px; box-sizing: border-box; }
/* (at least 64 wide: in the narrowest header, split view in a small window, the arrows after it give way
   instead, and Return and ⇧Return still step through the matches) */
.find-field input {
  flex: 1;
  min-width: 64px;
  height: 26px;
  padding: 0 4px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg-strong);
  font: 12px var(--font-ui);
}
.find-field input::placeholder,
.find-reprow input::placeholder { color: var(--placeholder); }
.find-n { flex: none; min-width: 36px; color: var(--muted); font: 11px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.find-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  color: var(--fg);
}
.find-ic:disabled { opacity: .35; }
.find-x { color: var(--muted); }
/* a field too narrow for all its parts (note-meta-fit.js, UI-14d): the arrows go, then the count */
.find-field.no-steps > .find-step,
.find-field.no-count > .find-n { display: none; }
.find-field.no-room input { min-width: 0; }
/* the Replace row: under the header, at its right */
.find-rep { position: relative; }
.find-rep > div { display: flex; justify-content: flex-end; }
.find-reprow {
  display: flex;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  height: 30px;
  margin: 4px 0 2px;
  padding: 0 2px 0 10px;
  border-radius: 15px;
  background: var(--fill);
}
.find-reprow input {
  width: 180px;
  height: 26px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg-strong);
  font: 12px var(--font-ui);
}
.find-btn { height: 26px; padding: 0 10px; border: 0; border-radius: 13px; color: var(--fg); font: 500 12px var(--font-ui); white-space: nowrap; }
.find-btn:disabled { opacity: .35; }

/* (written out: a highlight may not resolve variables in every browser; tints of the accent, the same in light) */
::highlight(find) { background-color: rgba(127, 176, 255, .28); }
::highlight(find-cur) { background-color: rgba(127, 176, 255, .6); color: #fff; }
/* in light, the current match's words are ink: white on the light page's tint can't be read (1.7:1) */
:root[data-theme="light"] ::highlight(find-cur) { color: rgb(10, 12, 17); }
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] ::highlight(find-cur) { color: rgb(10, 12, 17); }
}

/* the tints behind the lines with a match */
.find-lines { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.find-lines > i { position: absolute; right: -6px; left: -6px; border-radius: 6px; background: var(--find-line); transition: background-color 160ms var(--ease); }
.find-lines > i.cur { background: var(--find-line-cur); }