@media (hover: hover) and (pointer: fine) {
  html.has-auto-scrollbars,
  html.has-auto-scrollbars * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html.has-auto-scrollbars::-webkit-scrollbar,
  html.has-auto-scrollbars *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .auto-scrollbar-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
  }

  .auto-scrollbar-overlay.is-visible {
    opacity: 1;
  }

  .auto-scrollbar-rail {
    position: fixed;
    display: none;
    pointer-events: none;
    touch-action: none;
  }

  .auto-scrollbar-rail.is-active {
    display: block;
  }

  .auto-scrollbar-overlay.is-visible .auto-scrollbar-rail.is-active {
    pointer-events: auto;
  }

  .auto-scrollbar-rail--vertical {
    width: 12px;
    cursor: default;
  }

  .auto-scrollbar-rail--horizontal {
    height: 12px;
    cursor: default;
  }

  .auto-scrollbar-thumb {
    position: absolute;
    border: 3px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-text-muted, #727783) 54%, transparent);
    background-clip: padding-box;
    transition: background-color .16s ease;
  }

  .auto-scrollbar-rail--vertical .auto-scrollbar-thumb {
    left: 0;
    width: 12px;
    min-height: 30px;
  }

  .auto-scrollbar-rail--horizontal .auto-scrollbar-thumb {
    top: 0;
    height: 12px;
    min-width: 30px;
  }

  .auto-scrollbar-rail:hover .auto-scrollbar-thumb,
  .auto-scrollbar-overlay.is-dragging .auto-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--theme-text, #18191d) 68%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auto-scrollbar-overlay,
  .auto-scrollbar-thumb {
    transition: none !important;
  }
}