'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { getChartTitleStyles, HighContrastSelector } from '../../utilities/index';
/**
 * @internal
 */ export const funnelClassNames = {
    root: 'fui-funnel__root',
    chart: 'fui-funnel__chart',
    text: 'fui-funnel__text',
    calloutContentRoot: 'fui-funnel__callout-content-root',
    chartTitle: 'fui-funnel__chartTitle',
    svgTooltip: 'fui-funnel__svgTooltip'
};
/**
 * Base Styles
 */ const useStyles = makeStyles({
    root: {
        alignItems: 'center',
        width: '100%',
        height: '100%',
        fontFamily: tokens.fontFamilyBase,
        fontSize: tokens.fontSizeBase300,
        fontWeight: tokens.fontWeightRegular,
        position: 'relative',
        textAlign: 'left'
    },
    chart: {
        display: 'block',
        width: '100%',
        height: '100%'
    },
    text: {
        pointerEvents: 'none',
        fontWeight: tokens.fontWeightSemibold,
        fill: tokens.colorNeutralForeground1,
        fontFamily: tokens.fontFamilyBase,
        fontSize: tokens.fontSizeBase300
    },
    calloutContentRoot: {
        maxWidth: '238px'
    },
    chartTitle: getChartTitleStyles(),
    svgTooltip: {
        fill: tokens.colorNeutralBackground1,
        [HighContrastSelector]: {
            fill: 'Canvas'
        }
    }
});
/**
 * Apply styling to the FunnelChart component
 */ export const useFunnelChartStyles = (props)=>{
    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5;
    const { className } = props;
    const baseStyles = useStyles();
    return {
        root: mergeClasses(funnelClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
        chart: mergeClasses(funnelClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
        text: mergeClasses(funnelClassNames.text, baseStyles.text, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.text),
        calloutContentRoot: mergeClasses(baseStyles.calloutContentRoot, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.calloutContentRoot),
        chartTitle: mergeClasses(funnelClassNames.chartTitle, baseStyles.chartTitle, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.chartTitle),
        svgTooltip: mergeClasses(funnelClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.svgTooltip)
    };
};
