/* 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: 15px;
  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.ti {
  top: 50%;
  bottom: auto;
  height: var(--search-icon-size);
  transform: translateY(-50%);
}

.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;
}

/* Submit button occupying the icon slot, for a search field that posts a form
 * (the blog overview does). It sits over the decorative `.search-field__icon`,
 * which is pointer-events: none.
 *
 * base_elements.css styles bare `button` with a bordered pill - margin, radius,
 * and `background`/`border`/`color` marked !important - which would otherwise
 * paint a chip behind the glyph and, via the margin, shrink and offset this
 * absolutely-positioned box. Every one of those is reset here, including the
 * ones that need !important to beat it.
 */
.search-field__icon-btn {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  border: none !important;
  color: var(--muted-text) !important;
}

/* A project's own `button` rule can carry !important at a higher specificity
   and paint a chip in this slot. It sits on the field's rounded corner, so
   any fill shows as a square block breaking the pill. The class is repeated
   three times because the rules that do this in practice are shaped like
   `html:has(.nb-root) main button:not(.button-primary):not(.btn-primary)`
   (three classes, three elements) - two repeats lose that comparison. The
   matching corner radius keeps the shape whatever ends up painting it. */
.search-field
  .search-field__icon-btn.search-field__icon-btn.search-field__icon-btn {
  background: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  border-start-start-radius: calc(var(--search-height) / 2) !important;
  border-end-start-radius: calc(var(--search-height) / 2) !important;
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

.search-field__icon-btn:hover {
  color: var(--primary-blue) !important;
}

.search-field__icon-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: -2px;
  border-radius: calc(var(--search-height) / 2);
}

/* Neutralise the absolute positioning the decorative slot carries, so the glyph
 * centres inside the button instead of the field. */
.search-field__icon-btn .search-field__icon {
  position: static;
  inset-inline-start: auto;
  color: inherit;
}