"use client";
import { useEffect, useMemo } from "react";
/**
 * @remarks \@since 6.0.0
 */ export function useCSSVariables(variables, rootNodeOrInlineStyle) {
    useEffect(()=>{
        if (rootNodeOrInlineStyle === true || !variables.length) {
            return;
        }
        // use an iife so that hoisting doesn't cause a possible "null" issue for
        // the root
        const root = (()=>{
            if (!rootNodeOrInlineStyle) {
                return document.documentElement;
            }
            if ("current" in rootNodeOrInlineStyle) {
                return rootNodeOrInlineStyle.current;
            }
            return rootNodeOrInlineStyle;
        })();
        if (!root) {
            return;
        }
        // const root = document.documentElement;
        variables.forEach(({ name, value })=>{
            if (process.env.NODE_ENV !== "production" && root.style.getPropertyValue(name)) {
                const currentValue = root.style.getPropertyValue(name);
                const overwritten = currentValue !== value ? ` and will be overwritten to "${value}"` : "";
                // eslint-disable-next-line no-console
                console.warn(`The "${name}" css variable has already been set to "${currentValue}" ` + `on the root element${overwritten}. There might be conflicting overrides.`);
            }
            root.style.setProperty(name, `${value}`);
        });
        return ()=>{
            variables.forEach(({ name })=>{
                root.style.removeProperty(name);
            });
        };
    }, [
        variables,
        rootNodeOrInlineStyle
    ]);
    return useMemo(()=>{
        if (rootNodeOrInlineStyle !== true) {
            return;
        }
        return variables.reduce((style, { name, value })=>{
            style[name] = value;
            return style;
        }, {});
    }, [
        rootNodeOrInlineStyle,
        variables
    ]);
}

//# sourceMappingURL=useCSSVariables.js.map