'use client';

import { __styles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
export const tableHeaderCellClassName = 'fui-TableHeaderCell';
export const tableHeaderCellClassNames = {
  root: 'fui-TableHeaderCell',
  button: 'fui-TableHeaderCell__button',
  sortIcon: 'fui-TableHeaderCell__sortIcon',
  aside: 'fui-TableHeaderCell__aside'
};
const useTableLayoutStyles = /*#__PURE__*/__styles({
  root: {
    mc9l5x: "f15pt5es",
    ha4doy: "fmrv4ls"
  }
}, {
  d: [".f15pt5es{display:table-cell;}", ".fmrv4ls{vertical-align:middle;}"]
});
const useFlexLayoutStyles = /*#__PURE__*/__styles({
  root: {
    mc9l5x: "f22iagw",
    xawz: 0,
    Bh6795r: 0,
    Bnnss6s: 0,
    fkmc3a: "f1izfyrr",
    Bf4jedk: "f10tiqix"
  }
}, {
  d: [".f22iagw{display:flex;}", [".f1izfyrr{flex:1 1 0px;}", {
    p: -1
  }], ".f10tiqix{min-width:0px;}"]
});
/**
 * Styles for the root slot
 */
const useStyles = /*#__PURE__*/__styles({
  root: {
    Bhrd7zp: "figsok6",
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f3gpkru",
    robkg1: 0,
    Bmvh20x: 0,
    B3nxjsc: 0,
    Bmkhcsx: "f14ym4q2",
    B8osjzx: 0,
    pehzd3: 0,
    Blsv9te: 0,
    u7xebq: 0,
    Bsvwmf7: "f1euou18",
    qhf8xq: "f10pi13n"
  },
  rootInteractive: {
    Bi91k9c: "feu1g3u",
    Jwef8y: "f1t94bn6",
    lj723h: "f1g4hkjv",
    ecr2s2: "f1wfn5kd"
  },
  resetButton: {
    B3rzk8w: "fq6nmtn",
    B7ck84d: "f1e4lqlz",
    De3pzq: "f1u2r49w",
    sj55zd: "f1ym3bx4",
    Bahqtrf: "f1mo0ibp",
    Be2twd7: "fjoy568",
    Bg96gwp: "fytdu2e",
    B68tc82: 0,
    Bmxbyg5: 0,
    Bpg54ce: "f1gl81tg",
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f1mk8lai",
    Bgfg5da: 0,
    B9xav0g: 0,
    oivjwe: 0,
    Bn0qgzm: 0,
    B4g9neb: 0,
    zhjwy3: 0,
    wvpqe5: 0,
    ibv6hh: 0,
    u1mtju: 0,
    h3c5rm: 0,
    vrafjx: 0,
    Bekrc4i: 0,
    i8vvqc: 0,
    g2u3we: 0,
    icvyot: 0,
    B4j52fo: 0,
    irswps: "f3bhgqh",
    fsow6f: "fgusgyc"
  },
  button: {
    qhf8xq: "f10pi13n",
    a9b677: "fly5x3f",
    mc9l5x: "f22iagw",
    Bh6795r: 0,
    Bqenvij: "f1l02sjl",
    Bt984gj: "f122n59",
    i8kkvl: 0,
    Belr9w4: 0,
    rmohyg: "fkln5zr",
    sshi5w: "f1nxs5xn",
    xawz: 0,
    Bnnss6s: 0,
    fkmc3a: "f1izfyrr",
    oeaueh: "f1s6fcnf"
  },
  sortable: {
    Bceei9c: "f1k6fduh"
  },
  sortIcon: {
    mc9l5x: "f22iagw",
    Bt984gj: "f122n59",
    z8tnut: "fclwglc"
  },
  resizeHandle: {}
}, {
  d: [".figsok6{font-weight:var(--fontWeightRegular);}", [".f3gpkru{padding:0px var(--spacingHorizontalS);}", {
    p: -1
  }], [".f14ym4q2[data-fui-focus-within]:focus-within{outline:2px solid var(--colorStrokeFocus2);}", {
    p: -1
  }], [".f1euou18[data-fui-focus-within]:focus-within{border-radius:var(--borderRadiusMedium);}", {
    p: -1
  }], ".f10pi13n{position:relative;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", [".f1gl81tg{overflow:visible;}", {
    p: -1
  }], [".f1mk8lai{padding:0;}", {
    p: -1
  }], [".f3bhgqh{border:none;}", {
    p: -2
  }], ".fgusgyc{text-align:unset;}", ".fly5x3f{width:100%;}", ".f22iagw{display:flex;}", ".fqerorx{flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{align-items:center;}", [".fkln5zr{gap:var(--spacingHorizontalXS);}", {
    p: -1
  }], ".f1nxs5xn{min-height:32px;}", [".f1izfyrr{flex:1 1 0px;}", {
    p: -1
  }], ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
  h: [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
  a: [".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
});
/**
 * Apply styling to the TableHeaderCell slots based on the state
 */
export const useTableHeaderCellStyles_unstable = state => {
  'use no memo';

  const styles = useStyles();
  const layoutStyles = {
    table: useTableLayoutStyles(),
    flex: useFlexLayoutStyles()
  };
  state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
  state.button.className = mergeClasses(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);
  if (state.sortIcon) {
    state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
  }
  if (state.aside) {
    state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);
  }
  return state;
};