/* Windowed list. Renders only the rows in view plus an overscan margin, so a
   thousand-row fixture costs a screenful of DOM.

   Read `ui/virtual-list/CONTEXT.md` first. Every rule in the first block below
   is structural: without it the component is not undecorated, it is wrong. The
   window is moved with `transform: translateY(...)` from the top of a spacer
   the height of the whole list, so if the window stays in normal flow the
   transform pushes it below whatever came before instead of overlaying the
   spacer at the right offset. */

@layer components {
  .virtual-list {
    position: relative;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* The scroller is the thing that moves, so the browser is told to paint it
       on its own layer rather than working that out from the transform on a
       descendant every frame. */
    contain: paint;
  }

  .virtual-list__spacer {
    position: relative;
  }

  .virtual-list__window {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    will-change: transform;
  }

  /* ── Everything below this line is appearance and may be overridden ────
     A virtual list is a list, and `DESIGN.md` section 4 is explicit that a
     list of more than five items does not get a hairline under every row. The
     rows themselves belong to the caller's `renderItem`, so this file styles
     only the container: a scroll region that reads as one surface with a
     bounded edge, and nothing that competes with what the caller draws in it.

     Height is deliberately not set. A windowed list has to be given a bounded
     height by whatever lays it out, and guessing one here would be wrong on
     every screen; `CONTEXT.md` says the same. */

  .virtual-list {
    border-radius: var(--radius-md);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--text) 22%, transparent) transparent;
  }

  .virtual-list:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .virtual-list::-webkit-scrollbar { width: 10px; }
  .virtual-list::-webkit-scrollbar-track { background: transparent; }
  .virtual-list::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--text) 18%, transparent);
    border-radius: var(--radius-pill);
    border: 3px solid transparent;
    background-clip: content-box;
  }
  .virtual-list::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--text) 30%, transparent);
    background-clip: content-box;
  }
}