/* Base search field */
.search-field {
  display: flex;
  line-height: 28px;
  align-items: center;
  position: relative;
  max-width: 190px;
  --search-height: 40px;
  --search-icon-size: 16px;
}

.search-field__input {
  width: 100%;
  height: var(--search-height) !important;
  line-height: var(--search-height) !important;
  /* Kill the global form-input bottom margin (base_elements adds 15px). As a
     flex item its margin-box otherwise inflates .search-field's height, which
     drops the absolutely-positioned icon below the input's visual center. */
  margin: 0 !important;
  padding: 0 16px;
  padding-inline-start: 40px !important;
  padding-inline-end: 16px !important;
  border: 1px solid var(--field-border, var(--border-color)) !important;
  border-radius: calc(var(--search-height) / 2);
  outline: none;
  background-color: var(--field-bg, var(--input-bg)) !important;
  color: var(--text-color) !important;
  font-size: 0.95em;
  font-family: inherit;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-sizing: border-box;
  display: block;
  appearance: none;
}

/* base_elements.css styles `input[type="text"]` & friends, which scores
   (0,1,1) and so outranks this component's single class - the same clash the
   declarations above already resolve with !important. Doubling the class
   lifts this to (0,2,0) so the intended pill radius wins on its own, and it
   still applies to inputs used without the .search-field wrapper. */
.search-field__input.search-field__input {
  border-radius: calc(var(--search-height) / 2);
}

.search-field__input::placeholder {
  color: var(--muted-text);
}

.search-field__input::-webkit-search-cancel-button {
  cursor: pointer;
}

.search-field__input::-ms-clear {
  cursor: pointer;
}

/* Doubled class for the same reason as the radius rule above: base_elements'
   `input[type="text"]:hover/:focus` scores (0,2,1) and outranks a single class
   even though both sides use !important, so the field would hover/focus in
   --accent-blue / --primary-color instead of the brand accent. */
.search-field__input.search-field__input:hover {
  border-color: var(--primary-blue) !important;
}

.search-field__input.search-field__input:focus {
  outline: none;
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-blue) 15%, transparent);
}

.search-field__icon {
  position: absolute;
  inset-inline-start: 16px;
  /* Span the FULL input height and flex-center the glyph — robust regardless of
     the input's actual height (don't assume it equals --search-height) and of
     the FontAwesome glyph's own line-box metrics. */
  top: 0;
  bottom: 0;
  height: auto;
  transform: none;
  width: var(--search-icon-size);
  /* Font Awesome renders the glyph as a ::before mask sized in `em`, so the
     icon element itself must carry the font-size — otherwise the glyph scales
     off the inherited context font and overflows this box. */
  font-size: var(--search-icon-size);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-text);
  pointer-events: none;
}

.search-field__icon svg {
  display: block;
  width: var(--search-icon-size);
  height: var(--search-icon-size);
  fill: currentColor;
}

.search-field__icon::before {
  width: var(--search-icon-size) !important;
  height: var(--search-icon-size) !important;
}

/* RTL: keep the input's internal text direction LTR so English
   placeholders read naturally ("Search..." not "...Search"), but align
   text to the inline-end so the field still feels mirrored. User-typed
   Arabic still renders right-to-left via Unicode bidi within the input. */
[dir='rtl'] .search-field__input {
  direction: ltr;
  text-align: right;
}

[dir='rtl'] .search-field__input::placeholder {
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
}