'use client';

import { __styles, mergeClasses } from '@griffel/react';
export const teachingPopoverBodyClassNames = {
  root: 'fui-TeachingPopoverBody',
  media: 'fui-TeachingPopoverBody__media'
};
const popoverBodyDimension = 288;
export const useMediaStyles = /*#__PURE__*/__styles({
  base: {
    Bw0ie65: 0,
    Br312pm: 0,
    nk6f5a: 0,
    Ijaq50: 0,
    Bq1tomu: "fujjg13",
    B68tc82: 0,
    Bmxbyg5: 0,
    Bpg54ce: "f1a3p1vp",
    a9b677: "f14z66ap",
    jrapky: "f1jlhsmd",
    ha4doy: "fmrv4ls",
    Brf1p80: "f4d9j23",
    mc9l5x: "f22iagw"
  },
  short: {
    Bubjx69: "f1taewuw",
    Bfd67p1: "f2f587x"
  },
  medium: {
    Bubjx69: "f7da563",
    Bfd67p1: "fmwcswg"
  },
  tall: {
    Bubjx69: "f9ikmtg",
    Bfd67p1: "f1gv48o"
  }
}, {
  d: [[".fujjg13{grid-area:media;}", {
    p: -1
  }], [".f1a3p1vp{overflow:hidden;}", {
    p: -1
  }], ".f14z66ap{width:auto;}", ".f1jlhsmd{margin-bottom:12px;}", ".fmrv4ls{vertical-align:middle;}", ".f4d9j23{justify-content:center;}", ".f22iagw{display:flex;}", ".f1taewuw{aspect-ratio:2.4615384615384617;}", ".f7da563{aspect-ratio:1.6363636363636365;}", ".f9ikmtg{aspect-ratio:1;}"],
  t: ["@supports not (aspect-ratio){.f2f587x{height:117px;}}", "@supports not (aspect-ratio){.fmwcswg{height:176px;}}", "@supports not (aspect-ratio){.f1gv48o{height:288px;}}"]
});
const useStyles = /*#__PURE__*/__styles({
  root: {
    mc9l5x: "f22iagw",
    Beiy3e4: "f1vx9l62",
    Byoj8tv: "fpe6lb7"
  }
}, {
  d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".fpe6lb7{padding-bottom:12px;}"]
});
/** Applies style classnames to slots */
export const useTeachingPopoverBodyStyles_unstable = state => {
  'use no memo';

  const {
    mediaLength
  } = state;
  const styles = useStyles();
  const mediaStyles = useMediaStyles();
  state.root.className = mergeClasses(teachingPopoverBodyClassNames.root, styles.root, state.root.className);
  if (state.media) {
    state.media.className = mergeClasses(teachingPopoverBodyClassNames.media, mediaStyles.base, mediaStyles[mediaLength], state.media.className);
  }
  return state;
};