/* One look for every search, dropdown and date filter: an icon, the control and, for a dropdown, a caret, inside one
   rounded field. On a dark page header they take the stage colours. */

.find-field {
  --find-fill: var(--panel-2);
  --find-rim: var(--line);
  --find-ink: var(--ink);
  --find-muted: var(--ink-4);
  --find-icon: var(--brand-text);
  --find-focus: var(--brand-text);
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; height: 44px; padding: 0 14px;
  border-radius: var(--r-l); background: var(--find-fill); box-shadow: inset 0 0 0 1px var(--find-rim); color: var(--find-muted);
  font-size: var(--fs-s); cursor: text; transition: box-shadow .2s ease, background .2s ease;
}
.phead .find-field {
  --find-fill: var(--stage-fill);
  --find-rim: var(--stage-rim);
  --find-ink: var(--stage-ink);
  --find-muted: var(--stage-muted);
  --find-icon: var(--stage-muted);
  --find-focus: var(--stage-flow);
}
.find-field:hover { --find-rim: var(--line-strong); }
.phead .find-field:hover { --find-rim: var(--stage-flow); }
.find-field:focus-within { box-shadow: inset 0 0 0 1px var(--find-focus), 0 0 0 4px color-mix(in srgb, var(--find-focus) 16%, transparent); }
.find-field > svg { width: 17px; height: 17px; flex: none; color: var(--find-icon); }
.find-field input, .find-field select {
  flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--find-ink); font: inherit;
}
.find-field input::placeholder { color: var(--find-muted); opacity: 1; }
.find-field input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
/* A long option, such as an account name, stays on one line and is cut off instead of pushing the field taller. */
.find-field select { padding-right: 26px; appearance: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-field select option, .find-field select optgroup { color: var(--ink); background: var(--panel); }
/* The open list is the same as every other dropdown (forms.css); the field keeps its own caret. */
@supports (appearance: base-select) {
  .find-field select, .find-field select::picker(select) { appearance: base-select; }
  .find-field select { display: flex; align-items: center; }
  .find-field select::picker-icon { display: none; }
  /* The select covers the whole field, so the list it opens is exactly as wide as the field; the icon and caret sit on top. */
  .find-field:has(> select) select { position: absolute; inset: 0; width: 100%; padding: 0 40px 0 41px; border-radius: inherit; }
  .find-field:has(> select) > svg { position: relative; z-index: 1; pointer-events: none; }
  .find-field:has(> select) .find-caret { z-index: 1; }
  .find-field select::picker(select) { width: anchor-size(width); min-width: anchor-size(width); }
}
.find-field .find-caret { position: absolute; right: 13px; width: 16px; height: 16px; color: var(--find-muted); pointer-events: none; }
.find-field:has(:disabled) { opacity: .55; cursor: not-allowed; }
.find-field :disabled { cursor: not-allowed; }

/* The search takes the room, a dropdown or a date keeps to its words. */
.find-field.grow { flex: 2 1 280px; }
.find-field.pick { flex: 1 1 180px; }
.find-field.date { flex: 0 1 190px; }

/* The themed date picker lives inside the field: its own calendar button stands where a dropdown has its caret. */
.find-field .dp { position: static; display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; }
.find-field .dp input { cursor: pointer; padding-right: 26px; }
.find-field .dp-ic { right: 12px; color: var(--find-muted); }
.find-field .dp-ic svg { width: 16px; height: 16px; }

/* A date shows its own calendar in front, so the picker's button is not drawn twice; a click anywhere opens it. */
.find-field.date .dp-ic { display: none; }
.find-field.date .dp input { padding-right: 0; }

/* A switch, a set of choices or a button in the same row keeps the field's height. */
.find-field.find-toggle { flex: none; gap: 10px; color: var(--find-ink); cursor: pointer; }

@media (max-width: 760px) {
  .find-field.grow, .find-field.pick, .find-field.date { flex: 1 1 100%; }
}