/* Find and replace bar, and the highlights it paints (CSS Custom Highlight API). */

.findbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--tline);
  font-size: 12px;
}

.findbar[hidden] { display: none; }

.findbar input {
  box-sizing: border-box;
  flex: 1 1 110px;
  min-width: 0;
  max-width: 220px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  outline: none;
  background: var(--bg);
  color: var(--fg);
  font: 400 12px var(--font-ui);
}

.findbar input:focus { border-color: var(--accent); }
.find-n { min-width: 40px; color: var(--muted); font-variant-numeric: tabular-nums; }
.findbar .chip-btn { height: 26px; padding: 0 8px; }

::highlight(find) { background-color: var(--accent-soft); }
::highlight(find-cur) { background-color: var(--accent); color: var(--sheet); }