'use client';

import { tokens } from '@fluentui/react-theme';
import { __styles, mergeClasses } from '@griffel/react';
export const optionGroupClassNames = {
  root: 'fui-OptionGroup',
  label: 'fui-OptionGroup__label'
};
/**
 * Styles for the root slot
 */
const useStyles = /*#__PURE__*/__styles({
  root: {
    mc9l5x: "f22iagw",
    Beiy3e4: "f1vx9l62",
    Belr9w4: "fiut8dr",
    B8lkq7l: "f1xxzjds",
    eii1in: 0,
    H93o2g: 0,
    Gwp8xu: 0,
    Bd39igo: "f16cmn8k",
    om0q45: "f5642y",
    Hl9o3s: "ffdf81h",
    sl1c2c: 0,
    z4hxbw: 0,
    B0i58d9: 0,
    Bi9x0x4: 0,
    Bgurq3m: "f1bsn9kn"
  },
  label: {
    Beyfa6y: 0,
    Bbmb7ep: 0,
    Btl43ni: 0,
    B7oj6ja: 0,
    Dimara: "ft85np5",
    sj55zd: "f11d4kpn",
    mc9l5x: "ftgm304",
    Be2twd7: "fy9rknc",
    Bhrd7zp: "fl43uef",
    Bg96gwp: "fwrc4pm",
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f1mpq0zz"
  }
}, {
  d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}", ".f1xxzjds:not(:last-child)::after{content:\"\";}", [".f16cmn8k:not(:last-child)::after{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2);}", {
    p: -1
  }], ".f5642y:not(:last-child)::after{display:block;}", ".ffdf81h:not(:last-child)::after{padding-bottom:var(--spacingHorizontalXS);}", [".f1bsn9kn:not(:last-child)::after{margin:0 calc(var(--spacingHorizontalXS) * -1) var(--spacingVerticalXS);}", {
    p: -1
  }], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
    p: -1
  }], ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".ftgm304{display:block;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", [".f1mpq0zz{padding:var(--spacingHorizontalS) var(--spacingHorizontalSNudge);}", {
    p: -1
  }]]
});
/**
 * Apply styling to the OptionGroup slots based on the state
 */
export const useOptionGroupStyles_unstable = state => {
  'use no memo';

  const styles = useStyles();
  state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);
  if (state.label) {
    state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);
  }
  return state;
};