'use client';

import { __styles, mergeClasses, shorthands } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
export const teachingPopoverCarouselNavButtonClassNames = {
  root: 'fui-TeachingPopoverCarouselNavButton'
};
/**
 * Styles for the root slot
 */
const useStyles = /*#__PURE__*/__styles({
  root: {
    mc9l5x: "f22iagw",
    Bceei9c: "f1k6fduh",
    B7ck84d: "f1ewtqcl",
    Bqenvij: "f1x82gua",
    a9b677: "f1o3cbw4",
    De3pzq: "ffp7eso"
  },
  rootUnselected: {
    Bgfg5da: 0,
    B9xav0g: 0,
    oivjwe: 0,
    Bn0qgzm: 0,
    B4g9neb: 0,
    zhjwy3: 0,
    wvpqe5: 0,
    ibv6hh: 0,
    u1mtju: 0,
    h3c5rm: 0,
    vrafjx: 0,
    Bekrc4i: 0,
    i8vvqc: 0,
    g2u3we: 0,
    icvyot: 0,
    B4j52fo: 0,
    irswps: "f3bhgqh",
    Beyfa6y: 0,
    Bbmb7ep: 0,
    Btl43ni: 0,
    B7oj6ja: 0,
    Dimara: "f5q2cvs",
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f1c5fvqg",
    Bw0xxkn: 0,
    oeaueh: 0,
    Bpd4iqm: 0,
    Befb4lg: "f71xx7",
    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"],
    De3pzq: "frgiif3",
    o2ey54: "fawpdd5",
    C3llkk: "feyhbel"
  },
  rootSelected: {
    Bw0xxkn: 0,
    oeaueh: 0,
    Bpd4iqm: 0,
    Befb4lg: "f71xx7",
    a9b677: "fjw5fx7",
    Bgfg5da: 0,
    B9xav0g: 0,
    oivjwe: 0,
    Bn0qgzm: 0,
    B4g9neb: 0,
    zhjwy3: 0,
    wvpqe5: 0,
    ibv6hh: 0,
    u1mtju: 0,
    h3c5rm: 0,
    vrafjx: 0,
    Bekrc4i: 0,
    i8vvqc: 0,
    g2u3we: 0,
    icvyot: 0,
    B4j52fo: 0,
    irswps: "f3bhgqh",
    Beyfa6y: 0,
    Bbmb7ep: 0,
    Btl43ni: 0,
    B7oj6ja: 0,
    Dimara: "ff3glw6",
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f1c5fvqg",
    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"],
    By8wz76: "f1wgxgin"
  },
  rootBrand: {
    De3pzq: "f10s6wn9"
  },
  rootBrandUnselected: {
    De3pzq: "frxe7el",
    o2ey54: "fawpdd5",
    C3llkk: "feyhbel"
  }
}, {
  d: [".f22iagw{display:flex;}", ".f1k6fduh{cursor:pointer;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1x82gua{height:8px;}", ".f1o3cbw4{width:8px;}", ".ffp7eso{background-color:var(--colorBrandBackground);}", [".f3bhgqh{border:none;}", {
    p: -2
  }], [".f5q2cvs{border-radius:50%;}", {
    p: -1
  }], [".f1c5fvqg{padding:0px;}", {
    p: -1
  }], [".f71xx7{outline:var(--strokeWidthThin) solid transparent;}", {
    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;}", ".frgiif3{background-color:color-mix(in srgb, var(--colorBrandBackground) 30%, transparent);}", [".f71xx7{outline:var(--strokeWidthThin) solid transparent;}", {
    p: -1
  }], ".fjw5fx7{width:16px;}", [".f3bhgqh{border:none;}", {
    p: -2
  }], [".ff3glw6{border-radius:4px;}", {
    p: -1
  }], [".f1c5fvqg{padding:0px;}", {
    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
  }], ".f10s6wn9{background-color:var(--colorNeutralForegroundOnBrand);}", ".frxe7el{background-color:color-mix(in srgb, var(--colorNeutralForegroundOnBrand) 30%, transparent);}"],
  t: ["@supports not (color: color-mix(in lch, white, black)){.fawpdd5{opacity:0.3;}}", "@supports not (color: color-mix(in lch, white, black)){.feyhbel{background-color:var(--colorBrandBackground);}}"],
  m: [["@media (forced-colors: active){.f1wgxgin{background-color:CanvasText;}}", {
    m: "(forced-colors: active)"
  }]]
});
/**
 * Apply styling to the TeachingPopoverCarouselNavButton slots based on the state
 */
export const useTeachingPopoverCarouselNavButtonStyles_unstable = state => {
  'use no memo';

  const styles = useStyles();
  const {
    appearance,
    isSelected
  } = state;
  const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;
  state.root.className = mergeClasses(teachingPopoverCarouselNavButtonClassNames.root, styles.root, isSelected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && brandStyles, state.root.className);
  return state;
};