@layer components {
  .scroll-area {
    /* -- Density --------------------------------------------------
       For a scroll area the whitespace policy IS the scrollbar gutter:
       data-density scales the thumb thickness (4 / 6 / 8px); comfortable
       matches the unsized default. */
    --scrollbar-size: 6px;
    overflow: auto;
    position: relative;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    /* Webkit custom scrollbar */
    &::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
    &::-webkit-scrollbar-track { background: transparent; }
    &::-webkit-scrollbar-thumb {
      background-color: var(--border);
      border-radius: calc(var(--scrollbar-size) / 2);
      &:hover { background-color: var(--muted-foreground); }
    }

    /* Standard scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;

    &[data-density="compact"] { --scrollbar-size: 4px; }
    &[data-density="comfortable"] { --scrollbar-size: 6px; }
    &[data-density="spacious"] {
      --scrollbar-size: 8px;
      scrollbar-width: medium;
    }
  }
}