/*
 * A search field with a magnifier. The DSFR has one — `fr-search-bar` — but it
 * is built around a submit button: these fields filter as one types, and a
 * button that would submit nothing is one more inert control.
 *
 * The magnifier is therefore set inside the field, decorative, and the
 * `fr-icon-search-line` class is what draws it — the mask and the size come
 * from the DSFR, nothing here knows the path.
 */
.search-field {
  position: relative;
}

.search-field .fr-input {
  padding-left: 3rem;
}

.search-field .fr-icon-search-line {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-mention-grey);

  /* The field starts underneath it: without this, clicking the magnifier does
     not target the field. */
  pointer-events: none;
}