'use client';

import { __styles, mergeClasses } from '@griffel/react';
import { useButtonStyles_unstable } from '@fluentui/react-button';
const useBaseStyles = /*#__PURE__*/__styles({
  vertical: {
    Beiy3e4: "f1vx9l62"
  },
  verticalIcon: {
    Be2twd7: "f1rt2boy",
    jrapky: 0,
    Frg6f3: 0,
    t21cq0: 0,
    B6of3ja: 0,
    B74szlk: "f1s184ao"
  }
}, {
  d: [".f1vx9l62{flex-direction:column;}", ".f1rt2boy{font-size:24px;}", [".f1s184ao{margin:0;}", {
    p: -1
  }]]
});
/**
 * Apply styling to the ToolbarButton slots based on the state
 */
export const useToolbarButtonStyles_unstable = state => {
  'use no memo';

  const buttonStyles = useBaseStyles();
  state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);
  if (state.icon) {
    state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);
  }
  useButtonStyles_unstable(state);
};