'use client';

import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { treeItemLevelToken } from '../../utils/tokens';
import { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';
import { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';
export const treeItemClassNames = {
  root: 'fui-TreeItem'
};
const useBaseStyles = /*#__PURE__*/__resetStyles("r15xhw3a", "r2f6k57", [".r15xhw3a{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-right:var(--spacingHorizontalNone);}", ".r15xhw3a:focus{outline-style:none;}", ".r15xhw3a:focus-visible{outline-style:none;}", ".r15xhw3a[data-fui-focus-visible]>.fui-TreeItemLayout,.r15xhw3a[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}", ".r2f6k57{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-left:var(--spacingHorizontalNone);}", ".r2f6k57:focus{outline-style:none;}", ".r2f6k57:focus-visible{outline-style:none;}", ".r2f6k57[data-fui-focus-visible]>.fui-TreeItemLayout,.r2f6k57[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}"]);
const useStyles = /*#__PURE__*/__styles({
  level1: {
    iytv0q: "f10bgyvd"
  },
  level2: {
    iytv0q: "f1h0rod3"
  },
  level3: {
    iytv0q: "fgoqafk"
  },
  level4: {
    iytv0q: "f75dvuh"
  },
  level5: {
    iytv0q: "fqk7yw6"
  },
  level6: {
    iytv0q: "f1r3z17b"
  },
  level7: {
    iytv0q: "f1hrpd1h"
  },
  level8: {
    iytv0q: "f1iy65d0"
  },
  level9: {
    iytv0q: "ftg42e5"
  },
  level10: {
    iytv0q: "fyat3t"
  }
}, {
  d: [".f10bgyvd{--fluent-TreeItem--level:1;}", ".f1h0rod3{--fluent-TreeItem--level:2;}", ".fgoqafk{--fluent-TreeItem--level:3;}", ".f75dvuh{--fluent-TreeItem--level:4;}", ".fqk7yw6{--fluent-TreeItem--level:5;}", ".f1r3z17b{--fluent-TreeItem--level:6;}", ".f1hrpd1h{--fluent-TreeItem--level:7;}", ".f1iy65d0{--fluent-TreeItem--level:8;}", ".ftg42e5{--fluent-TreeItem--level:9;}", ".fyat3t{--fluent-TreeItem--level:10;}"]
});
/**
 * Apply styling to the TreeItem slots based on the state
 */
export const useTreeItemStyles_unstable = state => {
  'use no memo';

  const baseStyles = useBaseStyles();
  const styles = useStyles();
  const {
    level
  } = state;
  state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);
  return state;
};
function isStaticallyDefinedLevel(level) {
  return level >= 1 && level <= 10;
}