define(["require", "exports", "tslib", "@fluentui/react"], function (require, exports, tslib_1, react_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.getStyles = void 0;
    var getStyles = function (props) {
        var _a, _b, _c, _d;
        var theme = props.theme, chartValueSize = props.chartValueSize, chartWidth = props.chartWidth, chartHeight = props.chartHeight, className = props.className, lineColor = props.lineColor, toDrawShape = props.toDrawShape, solidFill = props.solidFill, gradientFill = props.gradientFill, opacity = props.opacity;
        return {
            root: [
                theme.fonts.medium,
                'ms-GaugeChart',
                {
                    alignItems: 'center',
                    display: 'flex',
                    flexDirection: 'column',
                    width: '100%',
                    height: '100%',
                },
                className,
            ],
            chart: {
                display: 'block',
                width: chartWidth,
                height: chartHeight,
            },
            limits: {
                fontSize: react_1.FontSizes.small,
                fontWeight: react_1.FontWeights.semibold,
                fill: theme.palette.neutralPrimary,
            },
            chartValue: {
                fontSize: chartValueSize,
                fontWeight: react_1.FontWeights.semibold,
                fill: theme.palette.neutralPrimary,
            },
            sublabel: {
                fontSize: react_1.FontSizes.small,
                fontWeight: react_1.FontWeights.semibold,
                fill: theme.palette.neutralPrimary,
            },
            needle: {
                fill: theme.palette.black,
                stroke: theme.semanticColors.bodyBackground,
            },
            chartTitle: {
                fontSize: react_1.FontSizes.small,
                fill: theme.palette.neutralPrimary,
            },
            segment: {
                outline: 'none',
                stroke: theme.semanticColors.focusBorder,
                fill: solidFill,
                fillOpacity: opacity,
            },
            gradientSegment: {
                width: '100%',
                height: '100%',
                background: gradientFill,
                opacity: opacity,
            },
            legendsContainer: {
                width: chartWidth,
            },
            calloutContentRoot: [
                {
                    display: 'grid',
                    overflow: 'hidden',
                    padding: '11px 16px 10px 16px',
                    backgroundColor: theme.semanticColors.bodyBackground,
                    backgroundBlendMode: 'normal, luminosity',
                },
            ],
            calloutDateTimeContainer: {
                display: 'flex',
                flexDirection: 'row',
                justifyContent: 'space-between',
            },
            calloutContentX: [
                tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { lineHeight: '16px', opacity: '0.85', color: theme.semanticColors.bodySubtext }),
            ],
            calloutBlockContainer: [
                theme.fonts.mediumPlus,
                {
                    marginTop: '13px',
                    color: theme.semanticColors.bodyText,
                },
                !toDrawShape && {
                    selectors: (_a = {},
                        _a[react_1.HighContrastSelector] = {
                            forcedColorAdjust: 'none',
                        },
                        _a),
                    borderLeft: "4px solid ".concat(lineColor),
                    paddingLeft: '8px',
                },
                toDrawShape && {
                    display: 'flex',
                },
            ],
            shapeStyles: {
                marginRight: '8px',
            },
            calloutlegendText: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { lineHeight: '16px', selectors: (_b = {},
                    _b[react_1.HighContrastSelectorBlack] = {
                        color: 'rgb(255, 255, 255)',
                    },
                    _b), color: theme.semanticColors.bodySubtext }),
            calloutContentY: [
                tslib_1.__assign(tslib_1.__assign({}, theme.fonts.mediumPlus), { fontWeight: 'bold', lineHeight: '22px', selectors: (_c = {},
                        _c[react_1.HighContrastSelectorBlack] = {
                            color: 'rgb(255, 255, 255)',
                        },
                        _c) }),
            ],
            descriptionMessage: [
                theme.fonts.small,
                {
                    selectors: (_d = {},
                        _d[react_1.HighContrastSelectorBlack] = {
                            color: 'rgb(255, 255, 255)',
                        },
                        _d),
                    color: theme.semanticColors.bodyText,
                    marginTop: '10px',
                    paddingTop: '10px',
                    borderTop: "1px solid ".concat(theme.semanticColors.menuDivider),
                },
            ],
        };
    };
    exports.getStyles = getStyles;
});
//# sourceMappingURL=GaugeChart.styles.js.map