@layer components {
  .search {
    --rows-margin: 0;

    .rows {
      inline-size: 100%;
      margin-inline: auto;
      max-inline-size: min(80ch, 100%);
      text-align: start;
    }

    mark {
      background-color: var(--color-highlight);
      border-radius: var(--radius-sm);
      color: var(--color-ink);
      padding: 0;
    }
  }

  /* Fizzy's .search scrolls inside the bar's modal. On the page nothing scrolls, and the overflow would cut the
     list's shadow at the sides. */
  .search-perma .search {
    overflow: visible;
  }
}