'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { HighContrastSelector } from '../../../utilities/utilities';
/**
 * @internal
 */ export const donutArcClassNames = {
    root: 'fui-donut-arc__root',
    focusRing: 'fui-donut-arc__focusRing',
    arcLabel: 'fui-donut-arc__arcLabel'
};
/**
 * Base Styles
 */ const useStyles = makeStyles({
    root: {
        cursor: 'default',
        outline: 'transparent',
        stroke: tokens.colorNeutralBackground1,
        '& selectors': {
            '::-moz-focus-inner': {
                border: 0
            }
        }
    },
    focusRing: {
        stroke: tokens.colorStrokeFocus2,
        strokeWidth: tokens.strokeWidthThickest,
        fill: 'transparent'
    },
    arcLabel: {
        ...typographyStyles.caption1Strong,
        fill: tokens.colorNeutralForeground1,
        [HighContrastSelector]: {
            stroke: 'CanvasText'
        }
    }
});
/**
 * Apply styling to the Arc components
 */ export const useArcStyles = (props)=>{
    var _props_styles, _props_styles1, _props_styles2;
    const { className } = props;
    const baseStyles = useStyles();
    return {
        root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
        focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.focusRing),
        arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.arcLabel)
    };
};
