'use client';

import { __styles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
/**
 * @internal
 */
export const chartTableClassNames = {
  root: 'fui-ChartTable__root',
  table: 'fui-ChartTable__table',
  headerCell: 'fui-ChartTable__headerCell',
  bodyCell: 'fui-ChartTable__bodyCell',
  chart: 'fui-ChartTable__chart'
};
const useStyles = /*#__PURE__*/__styles({
  root: {
    a9b677: "fly5x3f",
    B68tc82: "f1oy3dpc"
  },
  table: {
    po53p8: "fgkb47j"
  },
  headerCell: {
    Bahqtrf: "fk6fouc",
    Be2twd7: "fy9rknc",
    Bhrd7zp: "fl43uef",
    Bg96gwp: "fwrc4pm",
    De3pzq: "f16xq7d1",
    sj55zd: "f19n0e5",
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f1bnz8pu",
    fsow6f: ["f1o700av", "fes3tcz"],
    Bgfg5da: 0,
    B9xav0g: 0,
    oivjwe: 0,
    Bn0qgzm: 0,
    B4g9neb: 0,
    zhjwy3: 0,
    wvpqe5: 0,
    ibv6hh: 0,
    u1mtju: 0,
    h3c5rm: 0,
    vrafjx: 0,
    Bekrc4i: 0,
    i8vvqc: 0,
    g2u3we: 0,
    icvyot: 0,
    B4j52fo: 0,
    irswps: "fox1scm",
    By8wz76: "ftx6bta",
    B7iucu3: "fhs7xo9"
  },
  bodyCell: {
    Bahqtrf: "fk6fouc",
    Be2twd7: "fy9rknc",
    Bhrd7zp: "figsok6",
    Bg96gwp: "fwrc4pm",
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f1bnz8pu",
    Bgfg5da: 0,
    B9xav0g: 0,
    oivjwe: 0,
    Bn0qgzm: 0,
    B4g9neb: 0,
    zhjwy3: 0,
    wvpqe5: 0,
    ibv6hh: 0,
    u1mtju: 0,
    h3c5rm: 0,
    vrafjx: 0,
    Bekrc4i: 0,
    i8vvqc: 0,
    g2u3we: 0,
    icvyot: 0,
    B4j52fo: 0,
    irswps: "fox1scm",
    sj55zd: "f19n0e5",
    fsow6f: ["f1o700av", "fes3tcz"],
    B7iucu3: "fhs7xo9"
  }
}, {
  d: [".fly5x3f{width:100%;}", ".f1oy3dpc{overflow-x:auto;}", ".fgkb47j{border-collapse:collapse;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", [".f1bnz8pu{padding:var(--spacingHorizontalS);}", {
    p: -1
  }], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", [".fox1scm{border:var(--strokeWidthThick) solid var(--colorNeutralStroke2);}", {
    p: -2
  }], ".figsok6{font-weight:var(--fontWeightRegular);}", [".f1bnz8pu{padding:var(--spacingHorizontalS);}", {
    p: -1
  }], [".fox1scm{border:var(--strokeWidthThick) solid var(--colorNeutralStroke2);}", {
    p: -2
  }]],
  m: [["@media (forced-colors: active){.ftx6bta{background-color:Window;}}", {
    m: "(forced-colors: active)"
  }], ["@media (forced-colors: active){.fhs7xo9{color:WindowText;}}", {
    m: "(forced-colors: active)"
  }]]
});
/**
 * Apply styling to the ChartTable slots based on the state
 */
export const useChartTableStyles = props => {
  const baseStyles = useStyles();
  return {
    root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/),
    table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/),
    headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/),
    bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/),
    chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/)
  };
};