.xtool-scroll-indicator {
	--xsi-width: 26px;
	--xsi-height: 42px;
	--xsi-border-width: 2px;
	--xsi-border-color: rgba(255, 255, 255, 0.6);
	--xsi-dot-color: #ffffff;
	--xsi-dot-size: 4px;
	--xsi-duration: 1600ms;

	position: relative;
	display: inline-block;
	width: var(--xsi-width);
	height: var(--xsi-height);
	box-sizing: border-box;
	border: var(--xsi-border-width) solid var(--xsi-border-color);
	border-radius: var(--xsi-width);
}

.xtool-scroll-indicator--no-outline {
	border-color: transparent;
}

.xtool-scroll-indicator__dot {
	position: absolute;
	top: calc(var(--xsi-border-width) + 6px);
	left: 50%;
	width: var(--xsi-dot-size);
	height: var(--xsi-dot-size);
	margin-left: calc(var(--xsi-dot-size) / -2);
	border-radius: 50%;
	background: var(--xsi-dot-color);
	animation-name: xtool-scroll-indicator-fade-drop;
	animation-duration: var(--xsi-duration);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.xtool-scroll-indicator--bounce .xtool-scroll-indicator__dot {
	animation-name: xtool-scroll-indicator-bounce;
}

@keyframes xtool-scroll-indicator-fade-drop {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	100% {
		transform: translateY(calc(var(--xsi-height) - var(--xsi-border-width) * 2 - var(--xsi-dot-size) - 12px));
		opacity: 0;
	}
}

@keyframes xtool-scroll-indicator-bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(calc(var(--xsi-height) - var(--xsi-border-width) * 2 - var(--xsi-dot-size) - 12px));
	}
}