/* ── Local custom property ───────────────────────────────────────────────────
   .search uses the .input-wrap / .fa-input pair from input.css + field.css.
   Border and focus ring live on .search; fa-input underline is cancelled.
*/

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH — pill-shaped search control
   Composites:
     .input-wrap (input.css)  — absolute-positions icon and clear button
     .fa-input   (field.css)  — base typography, placeholder, disabled style
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Visually-hidden label — аліас у components/_shared/utilities.css ──────── */

/* ── Container ───────────────────────────────────────────────────────────── */
.search {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-full);
  background: var(--uris-color-semantic-surface);
  /* Horizontal inset keeps icon / clear button away from the pill edge */
  padding-inline: var(--uris-spacing-3);
  transition:
    border-color var(--uris-duration-fast) var(--uris-ease-default),
    box-shadow   var(--uris-duration-fast) var(--uris-ease-default);
}

/* ── Hover ───────────────────────────────────────────────────────────────── */
.search:hover:not(:focus-within) {
  border-color: var(--uris-color-semantic-surface-active);
}

/* ── Focus — accent ring on container (no underline on the input) ─────────── */
.search:focus-within {
  border-color: var(--uris-color-semantic-accent);
  box-shadow: 0 0 0 1px var(--uris-color-semantic-accent);
}

/* ── Disabled ────────────────────────────────────────────────────────────── */
.search:has(.fa-input:disabled) {
  background: var(--uris-color-semantic-surface-muted);
  cursor: not-allowed;
}
/* Freeze hover when disabled */
.search:has(.fa-input:disabled):hover:not(:focus-within) {
  border-color: var(--uris-color-semantic-border);
  box-shadow: none;
}

/* ── Input-wrap stretches to fill the pill ───────────────────────────────── */
.search > .input-wrap {
  flex: 1;
}

/* ── Cancel fa-input underline — border lives on .search ─────────────────── */
.search .fa-input {
  border-bottom-color: transparent;
}
.search .fa-input:focus {
  border-bottom-color: transparent;
  box-shadow: none;
}
/* Match input.css hover specificity (0-5-0) and win by cascade order */
.search .fa-input:hover:not(:focus):not(:disabled):not([readonly]) {
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Hide the browser-native ✕ button on type=search (WebKit / Blink) */
.search .fa-input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .search {
    transition: none;
  }
}