/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { useCallback, useRef } from "react";
//#region src/components/client/Modal/useScrollFade.ts
const FADE_PX = 30;
const maskImage = `linear-gradient(to bottom, rgba(0,0,0,calc(1 - var(--fade-top,0))) 0px, black ${FADE_PX}px, black calc(100% - ${FADE_PX}px), rgba(0,0,0,calc(1 - var(--fade-bottom,0))) 100%)`;
function updateFadeVars(el) {
	const { scrollTop, scrollHeight, clientHeight } = el;
	el.style.setProperty("--fade-top", scrollTop > 1 ? "1" : "0");
	el.style.setProperty("--fade-bottom", scrollTop < scrollHeight - clientHeight - 1 ? "1" : "0");
}
function useScrollFade(enabled) {
	const observerRef = useRef(null);
	const ref = useCallback((el) => {
		observerRef.current?.disconnect();
		observerRef.current = null;
		if (!el || !enabled) return;
		updateFadeVars(el);
		observerRef.current = new ResizeObserver(() => updateFadeVars(el));
		observerRef.current.observe(el);
	}, [enabled]);
	const onScroll = useCallback((e) => {
		if (enabled) updateFadeVars(e.currentTarget);
	}, [enabled]);
	if (!enabled) return {};
	return {
		ref,
		onScroll,
		style: {
			maskImage,
			WebkitMaskImage: maskImage
		}
	};
}
//#endregion
export { useScrollFade };
