'use client';

import { __styles, mergeClasses, shorthands } from '@griffel/react';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const teachingPopoverTitleClassNames = {
  root: 'fui-TeachingPopoverTitle',
  dismissButton: 'fui-TeachingPopoverTitle__dismissButton'
};
const useStyles = /*#__PURE__*/__styles({
  root: {
    mc9l5x: "f22iagw",
    Beiy3e4: "f1063pyq",
    Brf1p80: "f1869bpl",
    Be2twd7: "fod5ikn",
    Bhrd7zp: "fl43uef",
    sj55zd: "f19n0e5",
    Bg96gwp: "faaz57k",
    Byoj8tv: "f5b47ha",
    B6of3ja: "f1jkagg5",
    jrapky: "fi2ljxd"
  },
  rootBrand: {
    sj55zd: "f1phragk"
  },
  dismissButton: {
    qhf8xq: "f10pi13n",
    Bgfg5da: 0,
    B9xav0g: 0,
    oivjwe: 0,
    Bn0qgzm: 0,
    B4g9neb: 0,
    zhjwy3: 0,
    wvpqe5: 0,
    ibv6hh: 0,
    u1mtju: 0,
    h3c5rm: 0,
    vrafjx: ["f1n71otn", "f1deefiw"],
    Bekrc4i: 0,
    i8vvqc: 0,
    g2u3we: 0,
    icvyot: 0,
    B4j52fo: 0,
    irswps: "f88035w",
    mc9l5x: "f22iagw",
    Bt984gj: "f122n59",
    Bceei9c: "f1k6fduh",
    Bahqtrf: "fk6fouc",
    Be2twd7: "fkhj508",
    Bhrd7zp: "figsok6",
    Bg96gwp: "f1i3iumi",
    De3pzq: "f1c21dwh",
    B7ck84d: "f1ewtqcl",
    B7oj6ja: ["f3fg2lr", "f13av6d4"],
    Bbmb7ep: ["fzi6hpg", "fyowgf4"],
    Bfpq7zp: 0,
    g9k6zt: 0,
    Bn4voq9: 0,
    giviqs: "f89hs3r",
    Bw81rd7: 0,
    kdpuga: 0,
    dm238s: 0,
    B6xbmo0: 0,
    B3whbx2: "f2krc9w",
    B8q5s1w: "f8hki3x",
    Bci5o5g: ["f1d2448m", "ffh67wi"],
    n8qw10: "f1bjia2o",
    Bdrgwmp: ["ffh67wi", "f1d2448m"],
    Jyy4pa: "f1lfeew"
  },
  dismissBrand: {
    sj55zd: "f1phragk"
  }
}, {
  d: [".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f1869bpl{justify-content:space-between;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1jkagg5{margin-top:var(--spacingHorizontalNone);}", ".fi2ljxd{margin-bottom:var(--spacingHorizontalNone);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".f10pi13n{position:relative;}", [".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
    p: -2
  }], ".f122n59{align-items:center;}", ".f1k6fduh{cursor:pointer;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1ewtqcl{box-sizing:border-box;}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", [".f89hs3r[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
    p: -1
  }], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
    p: -1
  }], ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f1lfeew{-webkit-margin-start:auto;margin-inline-start:auto;}"]
});
/** Applies style classnames to slots */
export const useTeachingPopoverTitleStyles_unstable = state => {
  'use no memo';

  const styles = useStyles();
  const {
    appearance
  } = state;
  state.root.className = mergeClasses(teachingPopoverTitleClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);
  if (state.dismissButton) {
    state.dismissButton.className = mergeClasses(teachingPopoverTitleClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);
  }
  return state;
};