// Fixed-size virtual scroll wrapper. Most of the layout work is done by
// CDK's `<cdk-virtual-scroll-viewport>`; this stylesheet just makes the
// host a block-level container and tames default overflow behaviour.

.wr-virtual-scroll {
  display: block;
  width: 100%;
  overflow: hidden;

  &__viewport {
    width: 100%;
    height: 100%;
    // CDK already sets `overflow: auto`; just add a discreet scrollbar
    // skin via the platform defaults — no custom thumb so we match the
    // host application's chrome.
    scrollbar-width: thin;

    &::-webkit-scrollbar {
      width: 0.5rem;
      height: 0.5rem;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(var(--wr-color-dark-rgb), 0.2);
      border-radius: 999px;
    }
  }
}