{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSize } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n  root: 'fui-AvatarGroupItem',\n  avatar: 'fui-AvatarGroupItem__avatar',\n  overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    flexShrink: 0,\n    position: 'relative',\n  },\n  overflowItem: { padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}` },\n  nonOverflowItem: { borderRadius: tokens.borderRadiusCircular },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n  nonOverflowItem: {\n    position: 'absolute',\n  },\n  pie: { borderRadius: '0' },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n  base: {\n    marginLeft: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground1,\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n  thick: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n  },\n  thicker: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n  },\n  thickest: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n  },\n  xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n  xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n  s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n  l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n  s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n  mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n  m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n  l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n  xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n  base: {\n    position: 'absolute',\n  },\n  slices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n      left: '25%',\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n      clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      top: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n  },\n  rtlSlices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n      left: '0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n      left: '0',\n    },\n  },\n  thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n  thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n  thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n  const { isOverflowItem, layout, size } = state;\n  const { dir } = useFluent();\n\n  const avatarStyles = useAvatarStyles();\n  const overflowLabelStyles = useOverflowLabelStyles();\n  const pieStyles = usePieStyles();\n  const rootStyles = useRootStyles();\n  const sizeStyles = useSizeStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size);\n\n  const rootClasses = [rootStyles.base];\n\n  if (!isOverflowItem) {\n    rootClasses.push(rootStyles.nonOverflowItem);\n    rootClasses.push(groupChildClassName);\n    rootClasses.push(sizeStyles[size]);\n\n    if (layout === 'pie') {\n      rootClasses.push(pieStyles.base);\n\n      if (size < 56) {\n        rootClasses.push(pieStyles.thick);\n      } else if (size < 72) {\n        rootClasses.push(pieStyles.thicker);\n      } else {\n        rootClasses.push(pieStyles.thickest);\n      }\n\n      rootClasses.push(pieStyles.slices);\n\n      if (dir === 'rtl') {\n        rootClasses.push(pieStyles.rtlSlices);\n      }\n    }\n  } else {\n    rootClasses.push(rootStyles.overflowItem);\n  }\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.avatar.className = mergeClasses(\n    avatarGroupItemClassNames.avatar,\n    !isOverflowItem && avatarStyles.nonOverflowItem,\n    layout === 'pie' && avatarStyles.pie,\n    state.avatar.className,\n  );\n\n  if (state.overflowLabel) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.overflowLabel.className = mergeClasses(\n      avatarGroupItemClassNames.overflowLabel,\n      overflowLabelStyles.base,\n      state.overflowLabel.className,\n    );\n  }\n\n  return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSize): string => {\n  const stackStyles = useStackStyles();\n  const spreadStyles = useSpreadStyles();\n  const layoutClasses = [];\n\n  if (size) {\n    if (layout === 'stack') {\n      if (size < 56) {\n        layoutClasses.push(stackStyles.thick);\n      } else if (size < 72) {\n        layoutClasses.push(stackStyles.thicker);\n      } else {\n        layoutClasses.push(stackStyles.thickest);\n      }\n\n      if (size < 24) {\n        layoutClasses.push(stackStyles.xxs);\n      } else if (size < 48) {\n        layoutClasses.push(stackStyles.xs);\n      } else if (size < 96) {\n        layoutClasses.push(stackStyles.s);\n      } else {\n        layoutClasses.push(stackStyles.l);\n      }\n    } else if (layout === 'spread') {\n      if (size < 20) {\n        layoutClasses.push(spreadStyles.s);\n      } else if (size < 32) {\n        layoutClasses.push(spreadStyles.mNudge);\n      } else if (size < 64) {\n        layoutClasses.push(spreadStyles.l);\n      } else {\n        layoutClasses.push(spreadStyles.xl);\n      }\n    }\n  }\n\n  return mergeClasses(...layoutClasses);\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","base","alignItems","display","flexShrink","position","overflowItem","padding","spacingVerticalXS","spacingHorizontalXS","nonOverflowItem","borderRadius","borderRadiusCircular","useAvatarStyles","pie","useOverflowLabelStyles","marginLeft","spacingHorizontalS","color","colorNeutralForeground1","body1","useStackStyles","thick","boxShadow","strokeWidthThick","colorNeutralBackground2","thicker","strokeWidthThicker","thickest","strokeWidthThickest","xxs","spacingHorizontalXXS","xs","s","l","spacingHorizontalL","useSpreadStyles","mNudge","spacingHorizontalMNudge","m","spacingHorizontalM","xl","spacingHorizontalXL","usePieStyles","slices","clipPath","left","transform","transformOrigin","top","rtlSlices","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","push","className","stackStyles","spreadStyles","layoutClasses"],"mappings":"AAAA;;;;;;;;;;;;IAWaO,yBAAAA;;;qCAuJAwD;eAAAA;;IAmEAY,sBAAAA;;;;uBAnO4B,iBAAiB;4BACjB,wBAAwB;wBACnC,kBAAe;qCACG,kCAAkC;AAM3E,kCAAwE;IAC7EnE,MAAM;IACNC,QAAQ;IACRC,eAAe;AACjB,EAAE;AAEF,MAAMC,iCAAiC;AAEvC;;CAEC,GACD,MAAMC,oBAAgBZ,iBAAAA,EAAW;IAC/Ba,MAAM;QACJC,YAAY;QACZC,SAAS;QACTC,YAAY;QACZC,UAAU;IACZ;IACAC,cAAc;QAAEC,SAAS,GAAGjB,kBAAAA,CAAOkB,iBAAiB,CAAC,CAAC,EAAElB,kBAAAA,CAAOmB,mBAAmB,EAAE;IAAC;IACrFC,iBAAiB;QAAEC,cAAcrB,kBAAAA,CAAOsB,oBAAoB;IAAC;AAC/D;AAEA;;CAEC,GACD,MAAMC,sBAAkBzB,iBAAAA,EAAW;IACjCsB,iBAAiB;QACfL,UAAU;IACZ;IACAS,KAAK;QAAEH,cAAc;IAAI;AAC3B;AAEA;;CAEC,GACD,MAAMI,6BAAyB3B,iBAAAA,EAAW;IACxCa,MAAM;QACJe,YAAY1B,kBAAAA,CAAO2B,kBAAkB;QACrCC,OAAO5B,kBAAAA,CAAO6B,uBAAuB;QACrC,GAAG5B,4BAAAA,CAAiB6B,KAAK;IAC3B;AACF;AAEA;;CAEC,GACD,MAAMC,qBAAiBjC,iBAAAA,EAAW;IAChCkC,OAAO;QACLC,WAAW,CAAC,MAAM,EAAEjC,kBAAAA,CAAOkC,gBAAgB,CAAC,CAAC,EAAElC,kBAAAA,CAAOmC,uBAAuB,EAAE;IACjF;IACAC,SAAS;QACPH,WAAW,CAAC,MAAM,EAAEjC,kBAAAA,CAAOqC,kBAAkB,CAAC,CAAC,EAAErC,kBAAAA,CAAOmC,uBAAuB,EAAE;IACnF;IACAG,UAAU;QACRL,WAAW,CAAC,MAAM,EAAEjC,kBAAAA,CAAOuC,mBAAmB,CAAC,CAAC,EAAEvC,kBAAAA,CAAOmC,uBAAuB,EAAE;IACpF;IACAK,KAAK;QAAE,uBAAuB;YAAEd,YAAY,CAAC,UAAU,EAAE1B,kBAAAA,CAAOyC,oBAAoB,CAAC,CAAC,CAAC;QAAC;IAAE;IAC1FC,IAAI;QAAE,uBAAuB;YAAEhB,YAAY,CAAC,UAAU,EAAE1B,kBAAAA,CAAOmB,mBAAmB,CAAC,CAAC,CAAC;QAAC;IAAE;IACxFwB,GAAG;QAAE,uBAAuB;YAAEjB,YAAY,CAAC,UAAU,EAAE1B,kBAAAA,CAAO2B,kBAAkB,CAAC,CAAC,CAAC;QAAC;IAAE;IACtFiB,GAAG;QAAE,uBAAuB;YAAElB,YAAY,CAAC,UAAU,EAAE1B,kBAAAA,CAAO6C,kBAAkB,CAAC,CAAC,CAAC;QAAC;IAAE;AACxF;AAEA;;CAEC,GACD,MAAMC,sBAAkBhD,iBAAAA,EAAW;IACjC6C,GAAG;QAAE,uBAAuB;YAAEjB,YAAY1B,kBAAAA,CAAO2B,kBAAkB;QAAC;IAAE;IACtEoB,QAAQ;QAAE,uBAAuB;YAAErB,YAAY1B,kBAAAA,CAAOgD,uBAAuB;QAAC;IAAE;IAChFC,GAAG;QAAE,uBAAuB;YAAEvB,YAAY1B,kBAAAA,CAAOkD,kBAAkB;QAAC;IAAE;IACtEN,GAAG;QAAE,uBAAuB;YAAElB,YAAY1B,kBAAAA,CAAO6C,kBAAkB;QAAC;IAAE;IACtEM,IAAI;QAAE,uBAAuB;YAAEzB,YAAY1B,kBAAAA,CAAOoD,mBAAmB;QAAC;IAAE;AAC1E;AAEA;;CAEC,GACD,MAAMC,mBAAevD,iBAAAA,EAAW;IAC9Ba,MAAM;QACJI,UAAU;IACZ;IACAuC,QAAQ;QACN,aAAa;QACb,iBAAiB;QACjB,wCAAwC;YACtCC,UAAU,CAAC,wBAAwB,EAAE9C,+BAA+B,cAAc,CAAC;YACnF+C,MAAM;QACR;QACA,iBAAiB;QACjB,wCAAwC;YACtCD,UAAU,CAAC,8BAA8B,EAAE9C,+BAA+B,QAAQ,CAAC;YACnF+C,MAAM;QACR;QAEA,eAAe;QACf,iBAAiB;QACjB,wCAAwC;YACtCD,UAAU,CAAC,wBAAwB,EAAE9C,+BAA+B,cAAc,CAAC;YACnF+C,MAAM;QACR;QACA,iBAAiB;QACjB,wCAAwC;YACtC,yGAAyG;YACzGD,UAAU,CAAC,cAAc,EAAE9C,+BAA+B,MAAM,EAAEA,+BAA+B,EAAE,CAAC;YACpG+C,MAAM;YACNC,WAAW;YACXC,iBAAiB;QACnB;QACA,iBAAiB;QACjB,wCAAwC;YACtCH,UAAU,CAAC,UAAU,EAAE9C,+BAA+B,UAAU,EAAEA,+BAA+B,EAAE,CAAC;YACpG+C,MAAM;YACNG,KAAK;YACLF,WAAW;YACXC,iBAAiB;QACnB;IACF;IACAE,WAAW;QACT,aAAa;QACb,iBAAiB;QACjB,wCAAwC;YACtCL,UAAU,CAAC,8BAA8B,EAAE9C,+BAA+B,QAAQ,CAAC;QACrF;QACA,iBAAiB;QACjB,wCAAwC;YACtC8C,UAAU,CAAC,wBAAwB,EAAE9C,+BAA+B,cAAc,CAAC;QACrF;QAEA,eAAe;QACf,iBAAiB;QACjB,wCAAwC;YACtC8C,UAAU,CAAC,8BAA8B,EAAE9C,+BAA+B,QAAQ,CAAC;QACrF;QACA,iBAAiB;QACjB,wCAAwC;YACtC8C,UAAU,CAAC,YAAY,EAAE9C,+BAA+B,MAAM,EAAEA,+BAA+B,IAAI,CAAC;YACpG+C,MAAM;QACR;QACA,iBAAiB;QACjB,wCAAwC;YACtCD,UAAU,CAAC,UAAU,EAAE9C,+BAA+B,MAAM,EAAEA,+BAA+B,MAAM,CAAC;YACpG+C,MAAM;QACR;IACF;IACAxB,OAAO;QAAE,CAACvB,+BAA+B,EAAET,kBAAAA,CAAOkC,gBAAgB;IAAC;IACnEE,SAAS;QAAE,CAAC3B,+BAA+B,EAAET,kBAAAA,CAAOqC,kBAAkB;IAAC;IACvEC,UAAU;QAAE,CAAC7B,+BAA+B,EAAET,kBAAAA,CAAOuC,mBAAmB;IAAC;AAC3E;AAKO,0CAA0C,CAACuB;IAChD,MAAM,EAAEC,cAAc,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGH;IACzC,MAAM,EAAEI,GAAG,EAAE,OAAG9D,uCAAAA;IAEhB,MAAM+D,eAAe5C;IACrB,MAAM6C,sBAAsB3C;IAC5B,MAAM4C,YAAYhB;IAClB,MAAMiB,aAAa5D;IACnB,MAAM6D,aAAarE,yBAAAA;IAEnB,MAAMsE,sBAAsBC,uBAAuBT,QAAQC;IAE3D,MAAMS,cAAc;QAACJ,WAAW3D,IAAI;KAAC;IAErC,IAAI,CAACoD,gBAAgB;QACnBW,YAAYC,IAAI,CAACL,WAAWlD,eAAe;QAC3CsD,YAAYC,IAAI,CAACH;QACjBE,YAAYC,IAAI,CAACJ,UAAU,CAACN,KAAK;QAEjC,IAAID,WAAW,OAAO;YACpBU,YAAYC,IAAI,CAACN,UAAU1D,IAAI;YAE/B,IAAIsD,OAAO,IAAI;gBACbS,YAAYC,IAAI,CAACN,UAAUrC,KAAK;YAClC,OAAO,IAAIiC,OAAO,IAAI;gBACpBS,YAAYC,IAAI,CAACN,UAAUjC,OAAO;YACpC,OAAO;gBACLsC,YAAYC,IAAI,CAACN,UAAU/B,QAAQ;YACrC;YAEAoC,YAAYC,IAAI,CAACN,UAAUf,MAAM;YAEjC,IAAIY,QAAQ,OAAO;gBACjBQ,YAAYC,IAAI,CAACN,UAAUT,SAAS;YACtC;QACF;IACF,OAAO;QACLc,YAAYC,IAAI,CAACL,WAAWtD,YAAY;IAC1C;IAEA,oDAAoD;IACpD8C,MAAMxD,IAAI,CAACsE,SAAS,OAAG7E,mBAAAA,EAAaM,0BAA0BC,IAAI,KAAKoE,aAAaZ,MAAMxD,IAAI,CAACsE,SAAS;IAExG,oDAAoD;IACpDd,MAAMvD,MAAM,CAACqE,SAAS,OAAG7E,mBAAAA,EACvBM,0BAA0BE,MAAM,EAChC,CAACwD,kBAAkBI,aAAa/C,eAAe,EAC/C4C,WAAW,SAASG,aAAa3C,GAAG,EACpCsC,MAAMvD,MAAM,CAACqE,SAAS;IAGxB,IAAId,MAAMtD,aAAa,EAAE;QACvB,oDAAoD;QACpDsD,MAAMtD,aAAa,CAACoE,SAAS,OAAG7E,mBAAAA,EAC9BM,0BAA0BG,aAAa,EACvC4D,oBAAoBzD,IAAI,EACxBmD,MAAMtD,aAAa,CAACoE,SAAS;IAEjC;IAEA,OAAOd;AACT,EAAE;AAMK,+BAA+B,CAACE,QAAoCC;IACzE,MAAMY,cAAc9C;IACpB,MAAM+C,eAAehC;IACrB,MAAMiC,gBAAgB,EAAE;IAExB,IAAId,MAAM;QACR,IAAID,WAAW,SAAS;YACtB,IAAIC,OAAO,IAAI;gBACbc,cAAcJ,IAAI,CAACE,YAAY7C,KAAK;YACtC,OAAO,IAAIiC,OAAO,IAAI;gBACpBc,cAAcJ,IAAI,CAACE,YAAYzC,OAAO;YACxC,OAAO;gBACL2C,cAAcJ,IAAI,CAACE,YAAYvC,QAAQ;YACzC;YAEA,IAAI2B,OAAO,IAAI;gBACbc,cAAcJ,IAAI,CAACE,YAAYrC,GAAG;YACpC,OAAO,IAAIyB,OAAO,IAAI;gBACpBc,cAAcJ,IAAI,CAACE,YAAYnC,EAAE;YACnC,OAAO,IAAIuB,OAAO,IAAI;gBACpBc,cAAcJ,IAAI,CAACE,YAAYlC,CAAC;YAClC,OAAO;gBACLoC,cAAcJ,IAAI,CAACE,YAAYjC,CAAC;YAClC;QACF,OAAO,IAAIoB,WAAW,UAAU;YAC9B,IAAIC,OAAO,IAAI;gBACbc,cAAcJ,IAAI,CAACG,aAAanC,CAAC;YACnC,OAAO,IAAIsB,OAAO,IAAI;gBACpBc,cAAcJ,IAAI,CAACG,aAAa/B,MAAM;YACxC,OAAO,IAAIkB,OAAO,IAAI;gBACpBc,cAAcJ,IAAI,CAACG,aAAalC,CAAC;YACnC,OAAO;gBACLmC,cAAcJ,IAAI,CAACG,aAAa3B,EAAE;YACpC;QACF;IACF;IAEA,WAAOpD,mBAAAA,KAAgBgF;AACzB,EAAE"}