/* The search field: a pill with the magnifier as the submit button. A GET form, so it works without JavaScript. */

@layer components {
  .searchfield {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    min-height: 48px;
    margin: var(--s-3) var(--s-4);
    padding: 0 var(--s-1) 0 var(--s-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--muted);
  }

  /*
   * On the desktop website the search field of the header is the one: it shows the query on the search page. When the
   * header has only the magnifier (large text, see site-header.css, whose width this repeats) the field of the page is
   * the one again. A browser without container queries (Safari before 16) keeps the field of the header and hides the
   * one of the page, as it always did.
   */
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .searchfield {
      display: none;
    }

    @container app (width <= calc(27rem + 470px)) {
      .searchfield {
        display: flex;
      }
    }
  }

  .searchfield:focus-within {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  .searchfield__submit {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--muted);
  }

  .searchfield__input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 var(--s-3) 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
  }

  .searchfield__input::placeholder {
    color: var(--muted);
    opacity: 1;
  }

  /* No second "x" next to the one the browser draws. */
  .searchfield__input::-webkit-search-cancel-button {
    margin-left: var(--s-2);
  }
}