define(["require", "exports", "tslib", "./MultiStackedBarChart.types", "@fluentui/react/lib/Styling"], function (require, exports, tslib_1, MultiStackedBarChart_types_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.getMultiStackedBarChartStyles = void 0;
    var getMultiStackedBarChartStyles = function (props) {
        var className = props.className, width = props.width, barHeight = props.barHeight, shouldHighlight = props.shouldHighlight, theme = props.theme, href = props.href, variant = props.variant, hideLabels = props.hideLabels;
        return {
            root: [
                theme.fonts.medium,
                'ms-StackedBarChart',
                {
                    display: 'flex',
                    flexDirection: 'column',
                    width: width ? width : '100%',
                },
                className,
            ],
            items: {
                marginBottom: '11px',
            },
            chart: {
                width: '100%',
                height: barHeight ? barHeight : 12,
                display: 'block',
                overflow: 'visible',
            },
            chartTitle: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between' }),
            chartTitleLeft: {
                textOverflow: 'ellipsis',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                display: 'block',
                color: theme.palette.neutralPrimary,
                marginBottom: variant === MultiStackedBarChart_types_1.MultiStackedBarChartVariant.AbsoluteScale ? '4px' : '5px',
            },
            singleChartRoot: {
                width: width ? width : '100%',
                display: 'flex',
                flexDirection: 'column',
                marginBottom: variant === MultiStackedBarChart_types_1.MultiStackedBarChartVariant.AbsoluteScale ? '16px' : '10px',
            },
            opacityChangeOnHover: {
                opacity: shouldHighlight ? '' : '0.1',
                cursor: href ? 'pointer' : 'default',
                selectors: {
                    '&:focus': {
                        stroke: theme.palette.black,
                        strokeWidth: '2px',
                    },
                },
            },
            ratioNumerator: {
                fontSize: Styling_1.FontSizes.medium,
                fontWeight: Styling_1.FontWeights.semibold,
                color: theme.palette.neutralPrimary,
            },
            ratioDenominator: {
                fontSize: Styling_1.FontSizes.medium,
                color: theme.palette.neutralPrimary,
            },
            placeHolderOnHover: {
                opacity: shouldHighlight ? '' : '0.1',
                cursor: 'default',
                selectors: {
                    '&:focus': {
                        stroke: theme.palette.black,
                        strokeWidth: '2px',
                    },
                },
            },
            legendContainer: {
                margin: '5px 0px 0px 4px',
            },
            noData: {
                cursor: href ? 'pointer' : 'default',
            },
            barLabel: {
                fontSize: Styling_1.FontSizes.small,
                fontWeight: Styling_1.FontWeights.semibold,
                fill: theme.palette.neutralPrimary,
            },
            chartWrapper: {
                paddingRight: variant === MultiStackedBarChart_types_1.MultiStackedBarChartVariant.AbsoluteScale && !hideLabels ? 40 : 0,
            },
        };
    };
    exports.getMultiStackedBarChartStyles = getMultiStackedBarChartStyles;
});
//# sourceMappingURL=MultiStackedBarChart.styles.js.map