@layer component {
	.scrollbar {
		position: fixed;
		left: 50%;
		bottom: 20px;
		transform: translateX(-50%);
		width: 100%;
		bottom: 1px;
		height: 10px;
		background: rgba(255, 255, 255, 0);
		z-index: 9999;
		border-radius: 999px;
		opacity: 0;
		transition: opacity 0.5s ease;
	}
	.scrollbar.is-show {
		opacity: 1;
	}
	.scrollbar__thumb {
		width: 100px;
		height: 100%;
		background: #b7b7b7;
		border-radius: 999px;
	}

	.scrollbar {
		cursor: pointer;
	}

	.scrollbar__thumb {
		cursor: grab;
		touch-action: none;
		will-change: transform;
	}

	.scrollbar__thumb:active,
	.is-dragging-scrollbar .scrollbar__thumb {
		cursor: grabbing;
	}

	.is-dragging-scrollbar {
		user-select: none;
	}
	@media (max-width: 999px), (max-height: 749px) {
		.scrollbar {
			display: none;
		}
	}
}