'use client';

import { __styles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { HighContrastSelector } from '../../utilities/index';
export const hbcWithAxisClassNames = {
  opacityChangeOnHover: 'fui-hbcwa__opacityChangeOnHover',
  xAxisTicks: 'fui-hbcwa__xAxisTicks',
  tooltip: 'fui-hbcwa__tooltip',
  barLabel: 'fui-hbcwa__barLabel',
  chartLabel: '',
  xAxisDomain: '',
  xAxisText: '',
  yAxisDomain: '',
  yAxisTicks: '',
  yAxisText: '',
  root: '',
  xAxis: '',
  yAxis: '',
  legendContainer: '',
  hover: '',
  descriptionMessage: '',
  axisTitle: '',
  chartTitle: '',
  shapeStyles: '',
  chartWrapper: '',
  svgTooltip: '',
  chart: '',
  axisAnnotation: '',
  plotContainer: '',
  annotationLayer: ''
};
const useStyles = /*#__PURE__*/__styles({
  opacityChangeOnHover: {
    abs64n: "f9das1l"
  },
  xAxisTicks: {},
  barLabel: {
    Bahqtrf: "fk6fouc",
    Be2twd7: "fy9rknc",
    Bhrd7zp: "fl43uef",
    Bg96gwp: "fwrc4pm",
    Bkfmm31: "fhuob2q",
    Bj7tp1g: "f788z2a"
  }
}, {
  d: [".f9das1l{opacity:0.1;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"],
  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f788z2a{stroke:CanvasText;}}", {
    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
  }]]
});
/**
 * Apply styling to the HorizontalBarChartWithAxis slots based on the state
 */
export const useHorizontalBarChartWithAxisStyles = props => {
  const baseStyles = useStyles();
  return {
    opacityChangeOnHover: mergeClasses(hbcWithAxisClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover),
    xAxisTicks: mergeClasses(hbcWithAxisClassNames.xAxisTicks, baseStyles.xAxisTicks),
    barLabel: mergeClasses(hbcWithAxisClassNames.barLabel, baseStyles.barLabel)
  };
};