'use client';

import { __styles, mergeClasses } from '@griffel/react';
import { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';
import { tokens } from '@fluentui/react-theme';
export const teachingPopoverSurfaceClassNames = {
  root: 'fui-TeachingPopoverSurface'
};
const useStyles = /*#__PURE__*/__styles({
  root: {
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f23zza1",
    Beyfa6y: 0,
    Bbmb7ep: 0,
    Btl43ni: 0,
    B7oj6ja: 0,
    Dimara: "f1kijzfu",
    Bf4jedk: "f14hp5dx",
    B7ck84d: "f1ewtqcl"
  }
}, {
  d: [[".f23zza1{padding:var(--spacingVerticalL) var(--spacingVerticalL);}", {
    p: -1
  }], [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
    p: -1
  }], ".f14hp5dx{min-width:320px;}", ".f1ewtqcl{box-sizing:border-box;}"]
});
/**
 * Apply styling to the TeachingPopoverSurface slots based on the state
 */
export const useTeachingPopoverSurfaceStyles_unstable = state => {
  'use no memo';

  const styles = useStyles();
  // Make sure to merge teaching bubble surface prior to popover styles
  state.root.className = mergeClasses(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);
  const updatedState = usePopoverSurfaceStyles_unstable(state);
  return updatedState;
};