{"version":3,"file":"virtualList.module.mjs","names":[],"sources":["../../../../package/common/virtualList/virtualList.module.pcss"],"sourcesContent":[".virtualList {\n  overflow-y: auto;\n  box-sizing: border-box;\n  color: var(--text-color);\n  font-family: var(--default-font);\n\n  /* Disable the browser's own scroll anchoring — the component does its own\n     scroll-position correction when row heights change, and the two fighting\n     each other causes the thumb to desync while dragging. */\n  overflow-anchor: none;\n\n  /* Reserve the scrollbar gutter so rows don't re-wrap (and re-measure) when the\n     vertical scrollbar appears/disappears as content grows. */\n  scrollbar-gutter: stable;\n\n  /* Establish a stacking context so every z-index inside the list (sticky\n     header, toggle popover, drag clone) stays scoped to this component and\n     can't paint over outside content like a modal. */\n  isolation: isolate;\n\n  &-drag-clone {\n    box-sizing: border-box;\n    contain: layout paint style;\n    cursor: grabbing;\n\n    /* It tracks the finger via transform — never animate that. */\n    transition: none;\n  }\n\n  &-header {\n    display: grid;\n    position: sticky;\n\n    /* With `scrollParent` the header sticks to the page's scrollport, where a\n       fixed app bar may already sit; the list is given the offset from outside. */\n    top: var(--vl-header-top, 0);\n\n    /* Frozen layouts are exact pixels and may total more than the viewport, so\n       the header and the row canvas below both take that total and the list\n       scrolls sideways. `--vl-total` is only set once a column has been\n       resized; until then this resolves to 100% and nothing changes. */\n    width: max(100%, var(--vl-total, 0px));\n\n    /* Above focused rows (z-index 1) so a focused row scrolled under the header\n       never paints over it; the drag clone (z-index 3) still floats above both. */\n    z-index: 2;\n    background: var(--background-accent);\n    border-bottom: 1px solid var(--border-color);\n    box-sizing: border-box;\n\n    &-cell {\n      padding: 8px 12px;\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--text-dark);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      box-sizing: border-box;\n\n      /* Anchors the resize handle to the cell's trailing edge. */\n      position: relative;\n\n      /* The cell, not the button inside it, carries the header's tab stop, so\n         this is the ring a keyboard user follows. Inset because the cell clips\n         its overflow and an outward outline would be cut off. */\n      &:focus-visible {\n        outline: 1px solid var(--focus-border-color, var(--primary-color));\n        outline-offset: -1px;\n      }\n    }\n\n    /* Resize handle: a grab strip on the column's trailing edge, wider than the\n       line it sits on because a 1px target is unhittable. It stays inside the\n       cell rather than straddling the edge, since the cell clips its overflow\n       to keep a long header out of its neighbour. */\n    &-resize {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      width: 10px;\n      cursor: col-resize;\n      -webkit-tap-highlight-color: transparent;\n      touch-action: none;\n\n      /* The line itself, drawn on the trailing edge and revealed on hover. */\n      &::after {\n        content: '';\n        position: absolute;\n        top: 4px;\n        bottom: 4px;\n        right: 0;\n        width: 2px;\n        border-radius: 1px;\n        background: var(--primary-color);\n        opacity: 0;\n        transition: opacity 0.12s;\n      }\n\n      &:hover::after,\n      &:active::after {\n        opacity: 1;\n      }\n    }\n\n    /* The clickable part of a sortable header cell. Strips the button chrome and\n       inherits the cell's typography, so a sortable header looks identical to a\n       plain one until it's hovered. */\n    &-sort {\n      font: inherit;\n      color: inherit;\n      background: none;\n      border: none;\n      margin: 0;\n      padding: 0;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n      max-width: 100%;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n\n      &:focus-visible {\n        outline: 1px solid var(--focus-border-color, var(--primary-color));\n        outline-offset: 2px;\n      }\n\n      /* The cell's own ellipsis can't apply once its content is a flex button,\n         so the truncation moves onto the label. */\n      &-label {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      &-icon {\n        flex: none;\n        font-size: 11px;\n        opacity: 0.35;\n        transition:\n          opacity 0.15s,\n          color 0.15s;\n\n        &-active {\n          opacity: 1;\n          color: var(--primary-color);\n        }\n      }\n\n      &:hover &-icon {\n        opacity: 0.75;\n      }\n\n      &:hover &-icon-active {\n        opacity: 1;\n      }\n    }\n\n    &-toggle {\n      background: none;\n      border: none;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      padding: 4px 8px;\n      color: var(--text-dark);\n      display: flex;\n      align-items: center;\n      border-radius: var(--default-border-radius);\n      transition: background 0.15s;\n\n      &:hover {\n        background: var(--background-accent-light);\n        color: var(--text-color);\n      }\n    }\n  }\n\n  /* The entries pad themselves so a hover highlight reaches the panel edge. */\n  &-toggle-panel {\n    padding: 4px 0;\n  }\n\n  &-toggle {\n    &-wrapper {\n      position: absolute;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      display: flex;\n      align-items: center;\n      padding: 0 4px;\n    }\n\n    /* Chrome (background, shadow, radius, positioning) is provided by the\n       Popover panel this renders inside — keep only sizing here. */\n    &-popover {\n      display: flex;\n      flex-direction: column;\n      min-width: 160px;\n    }\n\n    &-item {\n      padding: 4px 12px;\n      white-space: nowrap;\n      transition: background 0.1s;\n      font-size: 14px;\n\n      /* `:focus` as well, because the panel takes the focus when the keyboard\n         opens it, and the checkbox itself is the focusable element. Not\n         `--background-accent-light`: it is the same colour as that panel in the\n         default theme. */\n      &:hover,\n      &:focus {\n        background: var(--background-accent);\n      }\n    }\n\n    /* Only rendered once a column has actually been resized, so it reads as an\n       undo for something the user just did rather than a permanent option. */\n    &-reset {\n      margin-top: 4px;\n      padding: 6px 12px;\n      border: none;\n      border-top: 1px solid var(--border-color);\n      background: none;\n      font: inherit;\n      font-size: 13px;\n      color: var(--text-color);\n      text-align: left;\n      white-space: nowrap;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      transition: background 0.1s;\n\n      &:hover,\n      &:focus {\n        background: var(--background-accent);\n      }\n    }\n  }\n\n  /* Count badge on the column-toggle cog: how many columns the user has hidden.\n     Positioned at the cog's upper-right corner; non-interactive. */\n  &-column-chip {\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 4px;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--primary-color);\n    color: var(--text-on-primary);\n    font-size: 10px;\n    font-weight: 600;\n    line-height: 1;\n    border-radius: 8px;\n    pointer-events: none;\n  }\n\n  &-select-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 4px;\n    box-sizing: border-box;\n\n    /* Only the header's select-all cell is focusable; the ones in rows are not. */\n    &:focus-visible {\n      outline: 1px solid var(--focus-border-color, var(--primary-color));\n      outline-offset: -1px;\n    }\n  }\n\n  &-body {\n    position: relative;\n    box-sizing: border-box;\n\n    /* Rows are absolute with left/right 0, so they inherit this width and stay\n       aligned with the header when the table is wider than the viewport. */\n    width: max(100%, var(--vl-total, 0px));\n  }\n\n  /* The list itself holds the tab stop, so the active row cannot use a\n     `:focus-visible` of its own. Ringing the list instead would mark the whole\n     table rather than the row the arrow keys are on, so the list drops its own\n     outline and lends it to that row. Scoped to `:focus-visible`, a mouse user\n     never sees it. */\n  &:focus-visible {\n    outline: none;\n\n    & .virtualList-row-active {\n      outline: 2px solid var(--focus-border-color, var(--primary-color));\n      outline-offset: -2px;\n    }\n  }\n\n  /* A resize drag travels over the rows, and their hover highlight following the\n     pointer is noise. Inert rather than a `:hover` override, which would have to\n     out-specify the selected-row rule to work. The drag itself is unaffected:\n     pointer capture bypasses hit testing. */\n  &-resizing &-body {\n    pointer-events: none;\n  }\n\n  &-row {\n    border-bottom: 1px solid var(--border-color);\n    box-sizing: border-box;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    transition: background 0.1s;\n\n    /* Isolate each row's layout/style so measuring or restyling one row can't force\n       the whole list to re-layout — keeps fast scrolling smooth. */\n    contain: layout style;\n\n    &-no-divider {\n      border-bottom: none;\n    }\n\n    &:hover {\n      background: var(--background-accent-light);\n    }\n\n    /* Opt out of the hover highlight (e.g. when each row is a Card that handles\n       its own hover). Declared before the `-selected` rule below, so a selected\n       row's highlight still wins on hover. */\n    &-no-hover:hover {\n      background: transparent;\n    }\n\n    &-selected {\n      background: var(--primary-lighter);\n\n      &:hover {\n        background: var(--primary-lighter);\n      }\n    }\n\n    &-draggable {\n      cursor: grab;\n\n      /* Stop the mobile long-press from selecting text or showing the callout. */\n      user-select: none;\n      -webkit-touch-callout: none;\n\n      &:active {\n        cursor: grabbing;\n      }\n    }\n\n    &-dragging {\n      opacity: 0.4;\n    }\n\n    /* Tree-reorder `inside` drop: the dragged node becomes a child of this row,\n       so highlight the whole row instead of drawing a between-rows line. */\n    &-drop-inside {\n      background: var(--primary-lighter);\n      box-shadow: inset 0 0 0 2px var(--primary-color);\n    }\n  }\n\n  /* Tree-reorder `before`/`after` drop line. Positioned inside the (relatively\n     positioned absolute) row; `left` is set inline to the target's indent so it\n     starts where the dropped content will. */\n  &-drop-line {\n    position: absolute;\n    right: 0;\n    height: 2px;\n    background: var(--primary-color);\n    pointer-events: none;\n    z-index: 1;\n\n    /* A small knob at the line's start, the usual tree drop-indicator look. */\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 50%;\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--primary-color);\n      transform: translate(-50%, -50%);\n    }\n\n    &-before {\n      top: -1px;\n    }\n\n    &-after {\n      bottom: -1px;\n    }\n  }\n\n  /* While a row is being dragged, suppress hover backgrounds so the pointer\n     moving across rows doesn't light up the wrong one, and stop text selection.\n     `touch-action: none` stops the touch drag from also scrolling the list\n     (only active once the long-press has armed the drag). */\n  &-reordering {\n    touch-action: none;\n\n    .virtualList-row {\n      user-select: none;\n\n      &:hover {\n        background: transparent;\n      }\n\n      &.virtualList-row-selected:hover {\n        background: var(--primary-lighter);\n      }\n\n      &.virtualList-row-dragging {\n        background: transparent;\n      }\n    }\n  }\n\n  &-cell {\n    padding: 8px 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 14px;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    min-width: 0;\n\n    /* `fit` columns are content-sized — keep their cells on a single line so the\n       content can't wrap, and so the width measurement reads the true intrinsic\n       width. (Other cells are free to wrap for variable-height rows.) */\n    &[data-fit-key] {\n      white-space: nowrap;\n    }\n  }\n\n  &-loading {\n    &-full {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n    }\n\n    &-indicator {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 8px 0;\n    }\n  }\n\n  /* Must stay after the declarations it undoes: both selectors are one class, so\n     only source order separates them. `overflow` cannot be split per axis here\n     either, because a container with `overflow-x` and `overflow-y: visible`\n     computes the visible one to `auto` and hands the list back its own vertical\n     scrollbar. So a frozen layout wider than the list overflows the page\n     sideways instead of scrolling inside it. */\n  &-windowed {\n    height: auto;\n    overflow: visible;\n    scrollbar-gutter: auto;\n\n    .virtualList-loading-full {\n      height: auto;\n      padding: 32px 0;\n    }\n  }\n}\n"],"mappings":""}