/* The search field (/design-system#search): one pill for every search, from the sidebar to the emoji picker.
   v5 is WhatsApp's: the neutral field at rest, the focus border over that same fill while typing, the x only once there is text. */
.cs-search {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  box-sizing: border-box;
  inline-size: 100%;
  block-size: var(--ds-search-height);
  padding-inline: 0.75rem 0.5rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-bg-subtle);
  color: var(--ds-text-muted);
  font-family: var(--ds-font-ui);
  font-size: var(--ds-search-font-size);
  transition: border-color var(--ds-duration), background-color var(--ds-duration);
}
.cs-search:is(:hover, :focus-within) { border-color: var(--ds-accent); }
.cs-search__glass { display: inline-grid; place-items: center; flex-shrink: 0; }
.cs-search-field {
  flex: 1;
  min-inline-size: 0;
  block-size: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ds-text);
  font: inherit;
}
.cs-search-field::placeholder { color: var(--ds-text-muted); }
.cs-search .cs-search-field:is(:focus, :focus-visible) { outline: none; box-shadow: none; }
.cs-search-field::-webkit-search-cancel-button,
.cs-search-field::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.cs-search-clear {
  --hover-size: 0;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: none;
  color: var(--ds-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.cs-search-clear:hover { background: var(--ds-bg-subtle); color: var(--ds-text); }
/* The x shows once there is something to clear; the Atendimento's search mode keeps it while open. */
.cs-search input:placeholder-shown ~ .cs-search-clear { display: none; }
.cs-search.cs-search--searching input ~ .cs-search-clear { display: inline-grid; }

.cs-search__busy { display: none; }
form[aria-busy="true"] .cs-search__busy { display: block; }
form[aria-busy="true"] .cs-search__glass { display: none; }
.cs-search:has(input:placeholder-shown) .cs-search__busy { display: none; }
.cs-search:has(input:placeholder-shown) .cs-search__glass { display: inline-grid; }

html[data-visual="v5"] .cs-search { border-color: transparent; background-color: var(--ds-field); }
html[data-visual="v5"] .cs-search:hover { border-color: transparent; }
html[data-visual="v5"] .cs-search:focus-within { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
html[data-visual="v5"] .cs-search-clear { color: var(--ds-text); }
html[data-visual="v5"] .cs-search-clear:hover { background: var(--ds-fill-hover); }

/* Under 16 px iOS zooms the page in when the field takes focus. */
@media (pointer: coarse) { .cs-search { font-size: 16px; } }

/* A search focused by the page opening, not by the person (data-quiet-focus): the caret without the line, as the field. */
html[data-visual="v5"] [data-quiet-focus] .cs-search:focus-within { outline: none; }