'use client';

import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { useTreeContext_unstable } from '../../contexts/treeContext';
import { treeItemLevelToken } from '../../utils/tokens';
import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
export const treeItemLayoutClassNames = {
  root: 'fui-TreeItemLayout',
  iconBefore: 'fui-TreeItemLayout__iconBefore',
  main: 'fui-TreeItemLayout__main',
  iconAfter: 'fui-TreeItemLayout__iconAfter',
  expandIcon: 'fui-TreeItemLayout__expandIcon',
  aside: 'fui-TreeItemLayout__aside',
  actions: 'fui-TreeItemLayout__actions',
  selector: 'fui-TreeItemLayout__selector'
};
const useRootBaseStyles = /*#__PURE__*/__resetStyles("ryb8khq", null, [".ryb8khq{display:flex;align-items:center;min-height:32px;box-sizing:border-box;grid-area:layout;}", ".ryb8khq:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}", ".ryb8khq:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}", ".ryb8khq:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}", ".ryb8khq:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}"]);
/**
 * Styles for the root slot
 */
const useRootStyles = /*#__PURE__*/__styles({
  leaf: {
    uwmqm3: ["f1k1erfc", "faevyjx"]
  },
  branch: {
    uwmqm3: ["fo100m9", "f6yw3pu"]
  },
  medium: {
    Bahqtrf: "fk6fouc",
    Be2twd7: "fkhj508",
    Bhrd7zp: "figsok6",
    Bg96gwp: "f1i3iumi"
  },
  small: {
    sshi5w: "f1pha7fy",
    Bahqtrf: "fk6fouc",
    Be2twd7: "fy9rknc",
    Bhrd7zp: "figsok6",
    Bg96gwp: "fwrc4pm"
  },
  subtle: {},
  "subtle-alpha": {
    Jwef8y: "f146ro5n",
    ecr2s2: "fkam630"
  },
  transparent: {
    De3pzq: "f1c21dwh",
    Jwef8y: "fjxutwb",
    ecr2s2: "fophhak"
  }
}, {
  d: [".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
  h: [".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"],
  a: [".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"]
});
/**
 * Styles for the action icon slot
 */
const useActionsBaseStyles = /*#__PURE__*/__resetStyles("rzvs2in", "r17h8a29", [".rzvs2in{display:flex;margin-left:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}", ".r17h8a29{display:flex;margin-right:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}"]);
/**
 * Styles for the action icon slot
 */
const useAsideBaseStyles = /*#__PURE__*/__resetStyles("r1825u21", "rezy0yk", [".r1825u21{display:flex;margin-left:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}", ".rezy0yk{display:flex;margin-right:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}"]);
/**
 * Styles for the expand icon slot
 */
const useExpandIconBaseStyles = /*#__PURE__*/__resetStyles("rh4pu5o", null, [".rh4pu5o{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);flex:0 0 auto;padding:var(--spacingVerticalXS) 0;}"]);
/**
 * Styles for the content slot
 */
const useMainBaseStyles = /*#__PURE__*/__resetStyles("rklbe47", null, [".rklbe47{padding:0 var(--spacingHorizontalXXS);}"]);
/**
 * Styles for the before/after icon slot
 */
const useIconBaseStyles = /*#__PURE__*/__resetStyles("rphzgg1", null, [".rphzgg1{display:flex;align-items:center;color:var(--colorNeutralForeground2);line-height:var(--lineHeightBase500);font-size:var(--fontSizeBase500);}"]);
const useIconBeforeStyles = /*#__PURE__*/__styles({
  medium: {
    z189sj: ["f7x41pl", "fruq291"]
  },
  small: {
    z189sj: ["ffczdla", "fgiv446"]
  }
}, {
  d: [".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}"]
});
const useIconAfterStyles = /*#__PURE__*/__styles({
  medium: {
    uwmqm3: ["fruq291", "f7x41pl"]
  },
  small: {
    uwmqm3: ["fgiv446", "ffczdla"]
  }
}, {
  d: [".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}"]
});
/**
 * Apply styling to the TreeItemLayout slots based on the state
 */
export const useTreeItemLayoutStyles_unstable = state => {
  'use no memo';

  const {
    main,
    iconAfter,
    iconBefore,
    expandIcon,
    root,
    aside,
    actions,
    selector
  } = state;
  const rootStyles = useRootStyles();
  const rootBaseStyles = useRootBaseStyles();
  const actionsBaseStyles = useActionsBaseStyles();
  const asideBaseStyles = useAsideBaseStyles();
  const mainBaseStyles = useMainBaseStyles();
  const expandIconBaseStyles = useExpandIconBaseStyles();
  const iconBaseStyles = useIconBaseStyles();
  const iconBeforeStyles = useIconBeforeStyles();
  const iconAfterStyles = useIconAfterStyles();
  const size = useTreeContext_unstable(ctx => ctx.size);
  const appearance = useTreeContext_unstable(ctx => ctx.appearance);
  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
  root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
  main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
  if (expandIcon) {
    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);
  }
  if (iconBefore) {
    iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);
  }
  if (iconAfter) {
    iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);
  }
  if (actions) {
    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
  }
  if (aside) {
    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
  }
  if (selector) {
    selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);
  }
  return state;
};