'use client';

import { __styles, mergeClasses, shorthands } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { useButtonStyles_unstable } from '@fluentui/react-button';
export const teachingPopoverCarouselFooterButtonClassNames = {
  root: 'fui-TeachingPopoverCarouselFooterButton'
};
const useStyles = /*#__PURE__*/__styles({
  root: {
    Bf4jedk: "f14es27b"
  },
  brandNext: {
    sj55zd: "f16muhyy",
    De3pzq: "f10s6wn9",
    g2u3we: "f1iimpp0",
    h3c5rm: ["f19uhqvu", "f1nx14hx"],
    B9xav0g: "fnqa90p",
    zhjwy3: ["f1nx14hx", "f19uhqvu"],
    Bi91k9c: "f3ymbdj",
    Jwef8y: "f1rgtb95",
    B2d53fq: "f1pu27ff",
    iro3zm: "f1d5c7in"
  },
  brandPrevious: {
    sj55zd: "f1phragk",
    De3pzq: "ffp7eso",
    g2u3we: "fm1ebug",
    h3c5rm: ["f28omuz", "f1uhflii"],
    B9xav0g: "f1ixw5o4",
    zhjwy3: ["f1uhflii", "f28omuz"],
    Bi91k9c: "f1rq72xc",
    Bgoe8wy: "f1bg5g8r",
    Bwzppfd: ["f1h9bnsk", "f12x9t0k"],
    oetu4i: "f19ervry",
    gg5e9n: ["f12x9t0k", "f1h9bnsk"],
    Jwef8y: "f15wkkf3",
    B2d53fq: "f1d6v5y2",
    b661bw: "f1565b9n",
    Bk6r4ia: ["fm07gvo", "fwlsg72"],
    B9zn80p: "fzw6fmy",
    Bpld233: ["fwlsg72", "fm07gvo"],
    iro3zm: "fnp9lpt"
  }
}, {
  d: [".f14es27b{min-width:96px;}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f10s6wn9{background-color:var(--colorNeutralForegroundOnBrand);}", ".f1iimpp0{border-top-color:var(--colorTransparentBackground);}", ".f19uhqvu{border-right-color:var(--colorTransparentBackground);}", ".f1nx14hx{border-left-color:var(--colorTransparentBackground);}", ".fnqa90p{border-bottom-color:var(--colorTransparentBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".fm1ebug{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".f28omuz{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f1uhflii{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f1ixw5o4{border-bottom-color:var(--colorNeutralForegroundOnBrand);}"],
  h: [".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}", ".f1rgtb95:hover{background-color:var(--colorNeutralForegroundOnBrand);}", ".f1pu27ff:hover:active{color:var(--colorCompoundBrandForeground1Pressed);}", ".f1d5c7in:hover:active{background-color:var(--colorNeutralForegroundOnBrand);}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1bg5g8r:hover{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".f1h9bnsk:hover{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f12x9t0k:hover{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f19ervry:hover{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1565b9n:hover:active{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".fm07gvo:hover:active{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".fwlsg72:hover:active{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".fzw6fmy:hover:active{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}"]
});
/**
 * Apply styling to the TeachingPopoverCarouselFooterButton slots based on the state
 */
export const useTeachingPopoverCarouselFooterButtonStyles_unstable = state => {
  'use no memo';

  const styles = useStyles();
  const {
    navType,
    popoverAppearance
  } = state;
  // Apply underlying fluent Button styles
  state = {
    ...state,
    ...useButtonStyles_unstable(state)
  };
  state.root.className = mergeClasses(teachingPopoverCarouselFooterButtonClassNames.root, styles.root, navType === 'prev' && popoverAppearance === 'brand' && styles.brandPrevious, navType === 'next' && popoverAppearance === 'brand' && styles.brandNext, state.root.className);
  return state;
};