@layer components {
  /* Search fields: a magnifier sits at the end while the field is empty
     and gives way to the clearing cross once there is text. */
  .search-glass {
    position: absolute;
    inset-inline-end: 0.1em;
    inset-block: 0;
    margin-block: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--touch);
    block-size: var(--touch);
    color: var(--muted);
    pointer-events: none;

    .glyph { inline-size: 1.1em; block-size: 1.1em; }
  }

  .search-clear {
    position: absolute;
    inset-inline-end: 0.1em;
    inset-block: 0;
    margin-block: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--touch);
    min-block-size: var(--touch);
    padding: 0;
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: var(--radius-s);
    cursor: pointer;
    touch-action: manipulation;

    .glyph { inline-size: 1.1em; block-size: 1.1em; }
  }

  .search-box {
    position: relative;

    &:has(input:placeholder-shown) .search-clear { display: none; }
    &:has(input:not(:placeholder-shown)) .search-glass { display: none; }
  }
  /* Out-ranks .stack's `input:not(…)` shorthand so long text keeps room for
     the cross regardless of stylesheet order. */
  span.search-box input[type="search"] { padding-inline-end: calc(var(--touch) + var(--space-2xs)); }
}