:root {
  --width-scroll-container: 0.5vw;
  --width-scroll-indicator: 0.5vw;
  --smooth-scroll: 0.5s;
}

html {
  scroll-behavior: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

html,
body {
  overflow-x: hidden;
}

body {
  scrollbar-width: none;
}

::-webkit-scrollbar {
  width: 0;
  background-color: transparent;
}
::-moz-scrollbar {
  width: 0;
  background-color: transparent;
}
::-ms-scrollbar {
  width: 0;
  background-color: transparent;
}

.active {
  scroll-behavior: auto;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.scroll {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--width-scroll-container);
  height: 100%;
  z-index: 1000000;
}

.scroll__container {
  background: rgba(90, 90, 90, 0.2);
  transition: var(--smooth-scroll);
}

.scroll__indicator {
  height: 0;
  width: var(--width-scroll-indicator);
  border-radius: 100vh;
  background: linear-gradient(to top, red, blue);
  transition: var(--smooth-scroll);
}
