'use client';

import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
export const ratingItemClassNames = {
  root: 'fui-RatingItem',
  selectedIcon: 'fui-RatingItem__selectedIcon',
  unselectedIcon: 'fui-RatingItem__unselectedIcon',
  halfValueInput: 'fui-RatingItem__halfValueInput',
  fullValueInput: 'fui-RatingItem__fullValueInput'
};
/**
 * Styles for the root slot
 */
const useStyles = /*#__PURE__*/__styles({
  root: {
    qhf8xq: "f10pi13n",
    Brovlpu: "ftqa4ok",
    B486eqv: "f2hkw1w",
    Bssx7fj: "f1b1k54r",
    uh7if5: ["f4ne723", "fqqcjud"],
    clntm0: "fh7aioi",
    Dlk2r6: ["fqqcjud", "f4ne723"],
    h6p2u: "f1ufm4qn",
    I6qiy5: ["f1qnwcb4", "fgrk5zm"],
    yzno9d: "fi52z01",
    By0wis0: ["fgrk5zm", "f1qnwcb4"],
    B2j2mmj: "ffht0p2",
    wigs8: "f1p0ul1q",
    pbfy6t: "f1c901ms",
    B0v4ure: "f1alokd7",
    Byrf0fs: 0,
    Bsiemmq: 0,
    Bwckmig: 0,
    skfxo0: 0,
    Iidy0u: 0,
    B98u21t: 0,
    Bvwlmkc: 0,
    jo1ztg: 0,
    Ba1iezr: 0,
    Blmvk6g: 0,
    B24cy0v: 0,
    Bil7v7r: 0,
    Br3gin4: 0,
    nr063g: 0,
    ghq09: 0,
    Bbgo44z: 0,
    Bseh09z: "fmj8fco",
    az1dzo: 0,
    Ba3ybja: 0,
    B6352mv: 0,
    vppk2z: 0,
    Biaj6j7: "f1iwowo3",
    B2pnrqr: "f1spmvte",
    B29w5g4: ["fgp7k2s", "f13pb23"],
    Bhhzhcn: "f1ihbrwi",
    Bec0n69: ["f13pb23", "fgp7k2s"]
  },
  small: {
    Be2twd7: "f1ugzwwg",
    a9b677: "frx94fk",
    Bqenvij: "fvblgha"
  },
  medium: {
    Be2twd7: "f4ybsrx",
    a9b677: "fjw5fx7",
    Bqenvij: "fd461yt"
  },
  large: {
    Be2twd7: "fe5j1ua",
    a9b677: "f64fuq3",
    Bqenvij: "fjamq6b"
  },
  "extra-large": {
    Be2twd7: "f24l1pt",
    a9b677: "f1w9dchk",
    Bqenvij: "fxldao9"
  }
}, {
  d: [".f10pi13n{position:relative;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", [".fmj8fco[data-fui-focus-within]:focus-within::after{border:2px solid var(--colorStrokeFocus2);}", {
    p: -2
  }], [".f1iwowo3[data-fui-focus-within]:focus-within::after{border-radius:var(--borderRadiusMedium);}", {
    p: -1
  }], ".f1spmvte[data-fui-focus-within]:focus-within::after{top:calc(2px * -1);}", ".fgp7k2s[data-fui-focus-within]:focus-within::after{right:calc(2px * -1);}", ".f13pb23[data-fui-focus-within]:focus-within::after{left:calc(2px * -1);}", ".f1ihbrwi[data-fui-focus-within]:focus-within::after{bottom:calc(2px * -1);}", ".f1ugzwwg{font-size:12px;}", ".frx94fk{width:12px;}", ".fvblgha{height:12px;}", ".f4ybsrx{font-size:16px;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".fe5j1ua{font-size:20px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".f24l1pt{font-size:28px;}", ".f1w9dchk{width:28px;}", ".fxldao9{height:28px;}"],
  f: [".ftqa4ok:focus{outline-style:none;}"],
  i: [".f2hkw1w:focus-visible{outline-style:none;}"],
  m: [["@media (forced-colors: active){.f1ufm4qn[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;}}", {
    m: "(forced-colors: active)"
  }], ["@media (forced-colors: active){.f1qnwcb4[data-fui-focus-within]:focus-within::after{border-right-color:Highlight;}.fgrk5zm[data-fui-focus-within]:focus-within::after{border-left-color:Highlight;}}", {
    m: "(forced-colors: active)"
  }], ["@media (forced-colors: active){.fi52z01[data-fui-focus-within]:focus-within::after{border-bottom-color:Highlight;}}", {
    m: "(forced-colors: active)"
  }]]
});
const useInputBaseClassName = /*#__PURE__*/__resetStyles("r1qfsv1p", "rh8pzaz", [".r1qfsv1p{position:absolute;left:0;top:0;right:0;bottom:0;box-sizing:border-box;margin:0;opacity:0;cursor:pointer;height:100%;}", ".rh8pzaz{position:absolute;right:0;top:0;left:0;bottom:0;box-sizing:border-box;margin:0;opacity:0;cursor:pointer;height:100%;}"]);
const useInputStyles = /*#__PURE__*/__styles({
  lowerHalf: {
    j35jbq: ["ffenbu1", "f1ktbn1t"]
  },
  upperHalf: {
    oyh7mz: ["f1ktbn1t", "ffenbu1"]
  }
}, {
  d: [".ffenbu1{right:50%;}", ".f1ktbn1t{left:50%;}"]
});
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r1420l2m", "r1yt29v5", [".r1420l2m{display:flex;overflow:hidden;color:var(--colorNeutralForeground1);fill:currentColor;pointer-events:none;position:absolute;left:0;right:0;top:0;bottom:0;}", ".r1yt29v5{display:flex;overflow:hidden;color:var(--colorNeutralForeground1);fill:currentColor;pointer-events:none;position:absolute;right:0;left:0;top:0;bottom:0;}"]);
const useIndicatorStyles = /*#__PURE__*/__styles({
  lowerHalf: {
    j35jbq: ["ffenbu1", "f1ktbn1t"],
    l5kjut: 0,
    uoufgc: 0,
    v39lw8: 0,
    Bbwb3tu: "f10jwh99"
  },
  upperHalf: {
    oyh7mz: ["f1ktbn1t", "ffenbu1"],
    Frg6f3: ["fbm7ezh", "f3ev47i"]
  },
  brand: {
    sj55zd: "f16muhyy"
  },
  marigold: {
    sj55zd: "f1whvut0"
  },
  filled: {
    sj55zd: "f1qaymga",
    ojy3ng: "f13qq9og",
    B7iucu3: "f1205bnn",
    Biw2w6l: "f1nocmko"
  },
  brandFilled: {
    sj55zd: "f1kdv6iu"
  },
  marigoldFilled: {
    sj55zd: "f1ymbmfq"
  }
}, {
  d: [".ffenbu1{right:50%;}", ".f1ktbn1t{left:50%;}", [".f10jwh99>svg{flex:0 0 auto;}", {
    p: -1
  }], ".fbm7ezh{margin-left:-50%;}", ".f3ev47i{margin-right:-50%;}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whvut0{color:var(--colorPaletteMarigoldBorderActive);}", ".f1qaymga{color:var(--colorNeutralBackground6);}", ".f13qq9og{stroke:var(--colorTransparentStroke);}", ".f1kdv6iu{color:var(--colorBrandBackground2);}", ".f1ymbmfq{color:var(--colorPaletteMarigoldBackground2);}"],
  m: [["@media (forced-colors: active){.f1205bnn{color:Canvas;}}", {
    m: "(forced-colors: active)"
  }], ["@media (forced-colors: active){.f1nocmko{stroke:CanvasText;}}", {
    m: "(forced-colors: active)"
  }]]
});
/**
 * Apply styling to the RatingItem slots based on the state
 */
export const useRatingItemStyles_unstable = state => {
  'use no memo';

  const {
    color,
    size,
    iconFillWidth,
    appearance
  } = state;
  const styles = useStyles();
  const inputBaseClassName = useInputBaseClassName();
  const inputStyles = useInputStyles();
  const indicatorBaseClassName = useIndicatorBaseClassName();
  const indicatorStyles = useIndicatorStyles();
  state.root.className = mergeClasses(ratingItemClassNames.root, styles.root, styles[size], state.root.className);
  if (state.halfValueInput) {
    state.halfValueInput.className = mergeClasses(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);
  }
  if (state.fullValueInput) {
    state.fullValueInput.className = mergeClasses(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);
  }
  if (state.unselectedIcon) {
    state.unselectedIcon.className = mergeClasses(ratingItemClassNames.unselectedIcon, indicatorBaseClassName, appearance === 'filled' && indicatorStyles.filled, color === 'brand' && (appearance === 'filled' ? indicatorStyles.brandFilled : indicatorStyles.brand), color === 'marigold' && (appearance === 'filled' ? indicatorStyles.marigoldFilled : indicatorStyles.marigold), iconFillWidth === 0.5 && indicatorStyles.upperHalf, state.unselectedIcon.className);
  }
  if (state.selectedIcon) {
    state.selectedIcon.className = mergeClasses(ratingItemClassNames.selectedIcon, indicatorBaseClassName, color === 'brand' && indicatorStyles.brand, color === 'marigold' && indicatorStyles.marigold, iconFillWidth === 0.5 && indicatorStyles.lowerHalf, state.selectedIcon.className);
  }
  return state;
};