/*
Copyright 2026 Element Creations Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/*
Wrapper that establishes the positioning context for the pinned overlay header.
It must fill its parent so the virtualized scroller below it keeps its height.
*/
.stickyRoot {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    /* Keep the pinned overlay and list content clipped to the panel bounds. */
    overflow: hidden;
}

/*
The pinned "current section" overlay header. It lives OUTSIDE the virtualized item stream so it never
unmounts, and backstops the cover/reveal done by the sticky header rows (.stickyRow): once a tall
section's real header row scrolls far enough that the virtualizer unmounts it, this overlay keeps that
section's header visible at the top. A mounted real header row (z-index 2) sits exactly over it, so
the hand-off is invisible. It is interactive (click toggles the section, hover highlights), so wheel
events over it are forwarded to the scroller in JS to keep scrolling working.

Only the relative order of this local 3-layer stack matters — room rows (normal flow) < this overlay
< real sticky header rows (.stickyRow) — so the values are just 1 and 2, not tied to any global scale.
*/
.stickyHeader {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1;
    pointer-events: auto;
}

/*
Section-header rows pin natively, which is what produces the cover/reveal: `top: 0` sticks each
header to the scroller's top; z-index above the overlay (1) so a mounted real header covers the
overlay backstop, and so a stuck header covers the room rows scrolling beneath it. Consecutive stuck
headers stack in DOM order, so the incoming header covers the current one on scroll-down and the
top one slides off to reveal the previous on scroll-up. (Room rows stay in normal flow, not sticky.)

The opaque background is essential: every header scrolled past the top stays stuck at top:0, so they
overlap. Without an opaque fill they show through each other (overlapping text); with it, the current
(top-most, last-in-DOM) header covers the rest, and sliding it down on scroll-up reveals the previous.
*/
.stickyRow {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--cpd-color-bg-canvas-default);
}
