/* ==========================================================================
   THANH CUỘN CHUẨN — một hợp đồng cho MỌI vùng cuộn (BA 14/10/2026)
   - Mảnh: bề rộng --ui-scrollbar-w (token component.scrollbar.width).
   - Ẩn mặc định; hiện khi rê chuột vào vùng (`:hover`) hoặc vùng đang cuộn
     (`[data-scrolling]`); đứng yên --ui-scrollbar-idle-delay thì ẩn lại.
     Cờ html[data-scrollbar-autohide] + html[data-scrollbars="active"] do
     utils/scrollbarAutoHide.js bật; cửa sổ không chạy script đó vẫn thấy
     thanh mảnh hiện thường trực (không bao giờ mất thanh cuộn hẳn).
   - Nằm ở @layer components (trên legacy) nên thắng mọi luật cũ; vùng nào muốn
     ẩn hẳn thanh cuộn dùng `scrollbar-width: none` (Chromium bỏ qua toàn bộ
     ::-webkit-scrollbar khi gặp thuộc tính đó).
   - KHÔNG khai scrollbar-width/scrollbar-color cho vùng cuộn thường ở file
     khác: Chromium 121+ gặp một trong hai là bỏ qua ::-webkit-scrollbar →
     thanh `thin` mặc định to gấp ba, hiện thường trực.
   ========================================================================== */
@layer components {
  ::-webkit-scrollbar {
    width: var(--ui-scrollbar-w, var(--dt-component-scrollbar-width));
    height: var(--ui-scrollbar-w, var(--dt-component-scrollbar-width));
  }
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
  ::-webkit-scrollbar-button {
    display: none;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: var(--ui-radius-full, var(--dt-dimension-radius-full));
    background-color: var(--ui-scrollbar-thumb, color-mix(in srgb, CanvasText 18%, transparent));
  }
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active {
    background-color: var(--ui-scrollbar-thumb-hover, color-mix(in srgb, CanvasText 32%, transparent));
  }

  html[data-scrollbar-autohide] ::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
  html[data-scrollbar-autohide][data-scrollbars="active"] :hover::-webkit-scrollbar-thumb,
  html[data-scrollbar-autohide][data-scrollbars="active"] [data-scrolling]::-webkit-scrollbar-thumb {
    background-color: var(--ui-scrollbar-thumb, color-mix(in srgb, CanvasText 18%, transparent));
  }
  html[data-scrollbar-autohide][data-scrollbars="active"] ::-webkit-scrollbar-thumb:hover,
  html[data-scrollbar-autohide] ::-webkit-scrollbar-thumb:active {
    background-color: var(--ui-scrollbar-thumb-hover, color-mix(in srgb, CanvasText 32%, transparent));
  }
}

/* Trình duyệt không có ::-webkit-scrollbar (Firefox, bản web): cùng hành vi
   bằng thuộc tính chuẩn. Đặt trong @layer legacy để mọi `scrollbar-width: none`
   cục bộ vẫn thắng. */
@layer legacy {
  @supports not selector(::-webkit-scrollbar) {
    :where(*) { scrollbar-width: thin; }
    html { scrollbar-color: var(--ui-scrollbar-thumb, color-mix(in srgb, CanvasText 18%, transparent)) transparent; }
    html[data-scrollbar-autohide] { scrollbar-color: transparent transparent; }
    html[data-scrollbar-autohide][data-scrollbars="active"] :is(:hover, [data-scrolling]) {
      scrollbar-color: var(--ui-scrollbar-thumb, color-mix(in srgb, CanvasText 18%, transparent)) transparent;
    }
  }
}