'use client';

import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { treeItemLevelToken } from '../../utils/tokens';
import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
import { useTreeContext_unstable } from '../../contexts/treeContext';
export const treeItemPersonaLayoutClassNames = {
  root: 'fui-TreeItemPersonaLayout',
  media: 'fui-TreeItemPersonaLayout__media',
  description: 'fui-TreeItemPersonaLayout__description',
  main: 'fui-TreeItemPersonaLayout__main',
  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
  aside: 'fui-TreeItemPersonaLayout__aside',
  actions: 'fui-TreeItemPersonaLayout__actions',
  selector: 'fui-TreeItemPersonaLayout__selector'
};
const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1r98egg", null, [".r1r98egg{display:grid;grid-template-rows:1fr auto;grid-template-columns:auto auto 1fr auto;grid-template-areas:\"expandIcon media main        aside\" \"expandIcon media description aside\";align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}", ".r1r98egg:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}", ".r1r98egg:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".r1r98egg:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}", ".r1r98egg:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"]);
/**
 * 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 expand icon slot
 */
const useMediaBaseStyles = /*#__PURE__*/__resetStyles("rkcde6g", "r1e986zr", [".rkcde6g{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXS) 0 var(--spacingHorizontalXXS);}", ".r1e986zr{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXXS) 0 var(--spacingHorizontalXS);}"]);
const useMainBaseStyles = /*#__PURE__*/__resetStyles("r1qjtz99", "rob5fcp", [".r1qjtz99{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}", ".rob5fcp{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}"]);
const useMainStyles = /*#__PURE__*/__styles({
  withDescription: {
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: ["f1625emv", "f5y9hxg"]
  }
}, {
  d: [[".f1625emv{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) 0 var(--spacingHorizontalS);}", {
    p: -1
  }], [".f5y9hxg{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) 0 var(--spacingHorizontalXS);}", {
    p: -1
  }]]
});
const useDescriptionBaseStyles = /*#__PURE__*/__resetStyles("r1bnsn1b", "r13x7gq", [".r1bnsn1b{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}", ".r13x7gq{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}"]);
/**
 * 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("rn61xvs", null, [".rn61xvs{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);grid-area:expandIcon;flex:0 0 auto;padding:var(--spacingVerticalXS) 0;}"]);
/**
 * Apply styling to the TreeItemPersonaLayout slots based on the state
 */
export const useTreeItemPersonaLayoutStyles_unstable = state => {
  'use no memo';

  const rootBaseStyles = useRootBaseStyles();
  const rootStyles = useRootStyles();
  const mediaBaseStyles = useMediaBaseStyles();
  const descriptionBaseStyles = useDescriptionBaseStyles();
  const actionsBaseStyles = useActionsBaseStyles();
  const asideBaseStyles = useAsideBaseStyles();
  const expandIconBaseStyles = useExpandIconBaseStyles();
  const mainBaseStyles = useMainBaseStyles();
  const mainStyles = useMainStyles();
  const size = useTreeContext_unstable(ctx => ctx.size);
  const appearance = useTreeContext_unstable(ctx => ctx.appearance);
  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], rootStyles[appearance], rootStyles[size], state.root.className);
  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);
  if (state.main) {
    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);
  }
  if (state.description) {
    state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);
  }
  if (state.actions) {
    state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);
  }
  if (state.aside) {
    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);
  }
  if (state.expandIcon) {
    state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);
  }
  if (state.selector) {
    state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);
  }
  return state;
};