/* Hide the platform gutter only after the overlay thumbs have initialized. */
html.floating-scrollbars,
html.floating-scrollbars * { scrollbar-width: none !important; }
html.floating-scrollbars::-webkit-scrollbar,
html.floating-scrollbars *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

.floating-scrollbar { position: fixed; z-index: 1000; pointer-events: none; }
.floating-scrollbar[hidden] { display: none; }
.floating-scrollbar[data-axis="y"] { width: 16px; }
.floating-scrollbar[data-axis="x"] { height: 16px; }
.floating-scrollbar-thumb { position: absolute; pointer-events: auto; touch-action: none; cursor: grab; }
.floating-scrollbar[data-axis="y"] .floating-scrollbar-thumb { left: 0; width: 16px; }
.floating-scrollbar[data-axis="x"] .floating-scrollbar-thumb { top: 0; height: 16px; }
.floating-scrollbar-thumb::before {
  content: ''; position: absolute; border-radius: 999px;
  background: rgba(20, 20, 20, .3);
  transition: background-color .14s ease, width .14s ease, height .14s ease;
}
.floating-scrollbar[data-axis="y"] .floating-scrollbar-thumb::before { top: 0; bottom: 0; right: 5px; width: 4px; }
.floating-scrollbar[data-axis="x"] .floating-scrollbar-thumb::before { left: 0; right: 0; bottom: 5px; height: 4px; }
.floating-scrollbar-thumb:hover::before { background: rgba(20, 20, 20, .55); }
.floating-scrollbar.is-dragging .floating-scrollbar-thumb { cursor: grabbing; }
.floating-scrollbar.is-dragging .floating-scrollbar-thumb::before { background: rgba(20, 20, 20, .8); }
.floating-scrollbar[data-axis="y"].is-dragging .floating-scrollbar-thumb::before { width: 6px; }
.floating-scrollbar[data-axis="x"].is-dragging .floating-scrollbar-thumb::before { height: 6px; }