.wd-nav-scroll {
  position: relative;
  height: var(--wd-nscroll-height, 5px);
  width: var(--wd-nscroll-width, 100%);
  margin: 20px auto 0;
  border-radius: var(--wd-brd-radius);
  background: var(--wd-nscroll-bg, rgba(var(--bgcolor-black-rgb), 0.07));
  touch-action: none;
  cursor: pointer;
  transition: all 0.25s ease;
}
.wd-nav-scroll:not(.wd-horizontal) {
  opacity: 0;
}
.wd-nav-scroll:after {
  content: "";
  position: absolute;
  inset: -15px;
}
.wd-nav-scroll.wd-lock {
  display: none;
}
.wd-nav-scroll-drag {
  position: relative;
  z-index: 1;
  cursor: grab;
}
.wd-nav-scroll-drag:before {
  content: "";
  display: block;
  height: var(--wd-nscroll-height, 5px);
  width: 100%;
  background: var(--wd-nscroll-drag-bg, rgba(var(--bgcolor-black-rgb), 0.2));
  border-radius: var(--wd-brd-radius);
  transition: all 0.25s ease;
}
.wd-nav-scroll-drag:after {
  content: "";
  position: absolute;
  inset: -15px;
}
.wd-nav-scroll-drag:hover:before,
.wd-grabbing > .wd-nav-scroll-drag:before {
  background: var(
    --wd-nscroll-drag-bg-hover,
    rgba(var(--bgcolor-black-rgb), 0.3)
  );
}
.wd-grabbing > .wd-nav-scroll-drag {
  cursor: grabbing;
}