body {
  -ms-overflow-style: none;
}

html {
  scrollbar-width: none !important;
}

body ::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.public-scroll-indicator {
  position: fixed;
  inset: 0 max(0px, env(safe-area-inset-right)) 0 auto;
  width: 0.26em;
  z-index: 18;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  mix-blend-mode: difference;
  background-color: transparent;
  border-radius: 1em;
  transition:
    opacity 260ms ease,
    visibility 0s linear 260ms;
}

.public-scroll-indicator--contained {
  position: absolute;
  inset: 0 0 auto auto;
  height: 100%;
}

.public-scroll-indicator.is-visible {
  opacity: 0.82;
  visibility: visible;
  transition:
    opacity 260ms ease,
    visibility 0s linear 0s;
}

.public-scroll-indicator:not(.is-scrollable) {
  opacity: 0 !important;
  visibility: hidden !important;
}

.public-scroll-indicator__track {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: inherit;
}

.public-scroll-indicator__thumb {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 30%;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, 0.75);
  transition: height 200ms ease;
  will-change: transform, height;
}

body.preview-open .public-scroll-indicator:not(.public-scroll-indicator--contained),
html.menu-filters-open .public-scroll-indicator:not(.public-scroll-indicator--contained),
body.menu-filters-open .public-scroll-indicator:not(.public-scroll-indicator--contained) {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 767px) {
  .public-scroll-indicator {
    width: 0.23em;
  }

  .public-scroll-indicator--contained {
    inset: 0 0 auto auto;
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-scroll-indicator {
    transition:
      opacity 120ms linear,
      visibility 0s linear 120ms;
  }
}