/*
 * TW overlay scrollbar Lego.
 *
 * COPY/PORT from the accepted ConfDeck global-scrollbar contract. Native
 * elements remain the only owners of wheel, touch, keyboard and programmatic
 * scrolling. Generated fixed rails have no layout footprint.
 */

:where(.is-tw-overlay-scrollport) {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

:where(.is-tw-overlay-scrollport)::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.tw-overlay-scrollbar-layer {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
}

.tw-overlay-scrollbar {
  position: fixed;
  display: block;
  opacity: var(--tw-scrollbar-idle-opacity);
  pointer-events: auto;
  touch-action: none;
  transition:
    opacity var(--tw-motion-fast) var(--tw-ease-standard);
}

.tw-overlay-scrollbar:hover,
.tw-overlay-scrollbar.is-active {
  opacity: var(--tw-scrollbar-active-opacity);
}

.tw-overlay-scrollbar--x {
  height: var(--tw-scrollbar-hit-size);
}

.tw-overlay-scrollbar--y {
  width: var(--tw-scrollbar-hit-size);
}

.tw-overlay-scrollbar__track {
  position: absolute;
  background: transparent;
}

.tw-overlay-scrollbar--x .tw-overlay-scrollbar__track {
  top: 50%;
  right: 0;
  left: 0;
  height: var(--tw-scrollbar-size);
  transform: translateY(-50%);
}

.tw-overlay-scrollbar--y .tw-overlay-scrollbar__track {
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--tw-scrollbar-size);
  transform: translateX(-50%);
}

.tw-overlay-scrollbar__thumb {
  position: absolute;
  inset: 0 auto auto 0;
  background: var(--tw-color-border-strong);
  border: 0;
  border-radius: var(--tw-radius);
  box-shadow: 0 0 0 1px var(--tw-color-bg);
  will-change: transform;
}

.tw-overlay-scrollbar--x .tw-overlay-scrollbar__thumb {
  width: var(--tw-scrollbar-thumb-length, 0);
  height: 100%;
  transform:
    translate3d(var(--tw-scrollbar-thumb-offset, 0), 0, 0);
}

.tw-overlay-scrollbar--y .tw-overlay-scrollbar__thumb {
  width: 100%;
  height: var(--tw-scrollbar-thumb-length, 0);
  transform:
    translate3d(0, var(--tw-scrollbar-thumb-offset, 0), 0);
}

.tw-overlay-scrollbar[hidden] {
  display: none;
}

/*
 * Rails live in one body layer, so covered content must not bleed through a
 * transient surface. A rail belonging to that surface stays interactive.
 */
body:has(dialog.tw-dialog[open])
  .tw-overlay-scrollbar:not([data-tw-scrollbar-scope="dialog"]),
body:not(:has(dialog.tw-dialog[open])):has(.tw-sheet:not([hidden]))
  .tw-overlay-scrollbar:not([data-tw-scrollbar-scope="sheet"]),
body[data-tw-shell-mobile-open="true"]:not(:has(dialog.tw-dialog[open])):not(:has(.tw-sheet:not([hidden])))
  .tw-overlay-scrollbar:not([data-tw-scrollbar-scope="shell"]) {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .tw-overlay-scrollbar {
    transition: none;
  }
}