'use client';

import { __styles, mergeClasses } from '@griffel/react';
import { navItemTokens } from '../sharedNavStyles.styles';
export const navDrawerClassNames = {
  root: 'fui-NavDrawer'
};
/**
 * Styles for the root slot
 */
const useStyles = /*#__PURE__*/__styles({
  root: {
    De3pzq: "f1ctqxl6",
    Bt984gj: "f3gca8"
  },
  defaultWidth: {
    a9b677: "f12j6lm0"
  }
}, {
  d: [".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f3gca8{align-items:unset;}", ".f12j6lm0{width:260px;}"]
});
/**
 * Apply styling to the NavDrawer slots based on the state
 */
export const useNavDrawerStyles_unstable = state => {
  'use no memo';

  const {
    size
  } = state;
  const styles = useStyles();
  state.root.className = mergeClasses(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);
  return state;
};