/* =========================================
   CUSTOM SCROLLBAR
========================================= */

.custom-scrollbar {
	position: fixed;
	top: 12px;
	right: 8px;
	bottom: 12px;
	z-index: 20;
	width: 34px;
	display: grid;
	grid-template-rows: 1fr auto;
	justify-items: center;
	gap: 10px;
	pointer-events: auto;
	--scroll-colour: var(--accent);
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.custom-scrollbar__track {
	position: relative;
	width: 12px;
	height: 100%;
	border: 1px solid rgba(21, 21, 20, 0.2);
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(21, 21, 20, 0.08)),
		rgba(243, 234, 219, 0.62);
	cursor: pointer;
	touch-action: none;
}

.custom-scrollbar__track::before {
	content: "";
	position: absolute;
	inset: -12px;
}

.custom-scrollbar__track:active {
	cursor: grabbing;
}

.custom-scrollbar__fill {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0%;
	border-radius: inherit;
	background: linear-gradient(180deg, #ff6b57, #f4cc45, #39d98a, #27c7d4, #a36bff);
	opacity: 0.32;
	pointer-events: none;
}

.custom-scrollbar__thumb {
	position: absolute;
	left: 50%;
	top: 0;
	width: 18px;
	height: 72px;
	border: 2px solid rgba(21, 21, 20, 0.9);
	border-radius: 999px;
	background: var(--scroll-colour);
	box-shadow:
		0 0 0 4px rgba(243, 234, 219, 0.72),
		0 12px 24px rgba(21, 21, 20, 0.22);
	transform: translate(-50%, 0);
	transition: background 180ms linear;
	cursor: grab;
	will-change: transform;
	touch-action: none;
}

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

body.is-dragging-scrollbar .custom-scrollbar__thumb {
	transition: none;
}

.custom-scrollbar__label {
	min-width: 22px;
	padding: 4px 0;
	border-radius: 999px;
	background: var(--ink);
	color: var(--cream);
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
}

body.is-section-four .custom-scrollbar__track {
	border-color: rgba(243, 234, 219, 0.26);
	background: rgba(243, 234, 219, 0.12);
}

body.is-section-four .custom-scrollbar__thumb {
	border-color: rgba(243, 234, 219, 0.9);
	box-shadow:
		0 0 0 4px rgba(21, 21, 20, 0.72),
		0 12px 24px rgba(0, 0, 0, 0.42);
}

body.is-section-four .custom-scrollbar__label {
	background: var(--cream);
	color: var(--ink);
}