'use client';

import { shorthands, __styles, mergeClasses } from '@griffel/react';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const teachingPopoverHeaderClassNames = {
  root: 'fui-TeachingPopoverHeader',
  dismissButton: 'fui-TeachingPopoverHeader__dismissButton',
  icon: 'fui-TeachingPopoverHeader__icon'
};
const useStyles = /*#__PURE__*/__styles({
  root: {
    mc9l5x: "f22iagw",
    Beiy3e4: "f1063pyq",
    sj55zd: "f11d4kpn",
    Bhrd7zp: "fl43uef",
    Be2twd7: "fy9rknc",
    Bg96gwp: "fwrc4pm",
    Byoj8tv: "f14wxoun",
    Bt984gj: "f122n59",
    B6of3ja: "f1jkagg5",
    jrapky: "fi2ljxd"
  },
  rootBrand: {
    sj55zd: "f1phragk"
  },
  dismissButton: {
    sj55zd: "fkfq4zb",
    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"],
    Jyy4pa: "f1lfeew",
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f16d74zd",
    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"]
  },
  dismissBrand: {
    sj55zd: "f1phragk"
  },
  icon: {
    Bqenvij: "fsv12xs",
    a9b677: "f19bqwv",
    Bg96gwp: "fwrc4pm",
    Be2twd7: "fy9rknc",
    Bt984gj: "f122n59",
    B7ck84d: "f1e4lqlz",
    mc9l5x: "ftuwxu6",
    Brf1p80: "f4d9j23",
    w71qe1: "f1iuv45f",
    ha4doy: "fmrv4ls",
    qhf8xq: "f10pi13n",
    De3pzq: "f1c21dwh",
    sj55zd: "fkfq4zb",
    Bokbzmb: "fpvr8q1"
  },
  iconBrand: {
    sj55zd: "f1phragk"
  }
}, {
  d: [".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f122n59{align-items:center;}", ".f1jkagg5{margin-top:var(--spacingHorizontalNone);}", ".fi2ljxd{margin-bottom:var(--spacingHorizontalNone);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f10pi13n{position:relative;}", [".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
    p: -2
  }], ".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;}", ".f1lfeew{-webkit-margin-start:auto;margin-inline-start:auto;}", [".f16d74zd{padding:var(--spacingVerticalXS) var(--spacingHorizontalXS);}", {
    p: -1
  }], [".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;}", ".fsv12xs{height:var(--fontSizeBase200);}", ".f19bqwv{width:var(--fontSizeBase200);}", ".f1e4lqlz{box-sizing:content-box;}", ".ftuwxu6{display:inline-flex;}", ".f4d9j23{justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".fpvr8q1{-webkit-margin-end:var(--spacingHorizontalXS);margin-inline-end:var(--spacingHorizontalXS);}"]
});
/** Applies style classnames to slots */
export const useTeachingPopoverHeaderStyles_unstable = state => {
  'use no memo';

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