/*
 * Feature-gated harmonised scrollbar appearance.
 * Visibility and width remain browser managed.
 */
:root[data-scrollbar-harmonisation] {
	scrollbar-color: var(--ds-border-input, #8c8f97) var(--ds-elevation-surface-current, #ffffff);
}

:root[data-scrollbar-harmonisation] * {
	scrollbar-color: var(--ds-border-input, #8c8f97) var(--ds-elevation-surface-current, #ffffff);
}

:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent],
:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent] * {
	scrollbar-color: var(--ds-border-input, #8c8f97) transparent;
}

:root[data-scrollbar-harmonisation]::-webkit-scrollbar-track,
:root[data-scrollbar-harmonisation]::-webkit-scrollbar-corner,
:root[data-scrollbar-harmonisation] *::-webkit-scrollbar-track,
:root[data-scrollbar-harmonisation] *::-webkit-scrollbar-corner {
	background-color: var(--ds-elevation-surface-current, #ffffff);
	border: 0;
}

:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent]::-webkit-scrollbar-track,
:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent]::-webkit-scrollbar-corner,
:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent]
	*::-webkit-scrollbar-track,
:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent]
	*::-webkit-scrollbar-corner {
	background-color: transparent;
}

:root[data-scrollbar-harmonisation]::-webkit-scrollbar-thumb,
:root[data-scrollbar-harmonisation] *::-webkit-scrollbar-thumb {
	background-color: var(--ds-border-input, #8c8f97);
}

@media (forced-colors: active) {
	:root[data-scrollbar-harmonisation],
	:root[data-scrollbar-harmonisation] *,
	:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent],
	:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent] * {
		scrollbar-color: auto;
	}

	:root[data-scrollbar-harmonisation]::-webkit-scrollbar-track,
	:root[data-scrollbar-harmonisation]::-webkit-scrollbar-thumb,
	:root[data-scrollbar-harmonisation]::-webkit-scrollbar-corner,
	:root[data-scrollbar-harmonisation] *::-webkit-scrollbar-track,
	:root[data-scrollbar-harmonisation] *::-webkit-scrollbar-thumb,
	:root[data-scrollbar-harmonisation] *::-webkit-scrollbar-corner,
	:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent]::-webkit-scrollbar-track,
	:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent]::-webkit-scrollbar-thumb,
	:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent]::-webkit-scrollbar-corner,
	:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent]
		*::-webkit-scrollbar-track,
	:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent]
		*::-webkit-scrollbar-thumb,
	:root[data-scrollbar-harmonisation][data-scrollbar-harmonisation-transparent]
		*::-webkit-scrollbar-corner {
		background-color: revert;
		border: revert;
	}
}