.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), .07));
	touch-action: none;
	cursor: pointer;
	transition: all .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), .2));
	border-radius: var(--wd-brd-radius);
	transition: all .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), .3));
}

.wd-grabbing>.wd-nav-scroll-drag {
	cursor: grabbing;
}