'use client';

import { __styles, 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 = /*#__PURE__*/__styles({
  root: {
    Bt984gj: "f122n59",
    a9b677: "fly5x3f",
    Bqenvij: "f1l02sjl",
    Bahqtrf: "fk6fouc",
    Be2twd7: "fkhj508",
    Bhrd7zp: "figsok6",
    qhf8xq: "f10pi13n",
    fsow6f: ["f1o700av", "fes3tcz"]
  },
  chart: {
    mc9l5x: "ftgm304",
    a9b677: "fly5x3f",
    Bqenvij: "f1l02sjl"
  },
  text: {
    Bkecrkj: "f1aehjj5",
    Bhrd7zp: "fl43uef",
    Bkfmm31: "fhuob2q",
    Bahqtrf: "fk6fouc",
    Be2twd7: "fkhj508"
  },
  calloutContentRoot: {
    B2u0y6b: "f15g8at8"
  },
  chartTitle: {
    Bahqtrf: "fk6fouc",
    Be2twd7: "f13mqy1h",
    Bhrd7zp: "fl43uef",
    Bg96gwp: "fcpl73t",
    Bkfmm31: "fhuob2q",
    Bvjb7m6: "fhv2zbx",
    fsow6f: "f17mccla",
    jrapky: "fqcjy3b"
  },
  svgTooltip: {
    Bkfmm31: "f5q6cfr",
    Bxms50k: "f1bgda6t"
  }
}, {
  d: [".f122n59{align-items:center;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f10pi13n{position:relative;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".ftgm304{display:block;}", ".f1aehjj5{pointer-events:none;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".f15g8at8{max-width:238px;}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fhv2zbx{forced-color-adjust:auto;}", ".f17mccla{text-align:center;}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".f5q6cfr{fill:var(--colorNeutralBackground1);}"],
  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1bgda6t{fill:Canvas;}}", {
    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
  }]]
});
/**
 * 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)
  };
};