import { __assign } from "tslib";
import { FontSizes, FontWeights, HighContrastSelector, HighContrastSelectorBlack } from '@fluentui/react';
export 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: FontSizes.small,
            fontWeight: FontWeights.semibold,
            fill: theme.palette.neutralPrimary,
        },
        chartValue: {
            fontSize: chartValueSize,
            fontWeight: FontWeights.semibold,
            fill: theme.palette.neutralPrimary,
        },
        sublabel: {
            fontSize: FontSizes.small,
            fontWeight: FontWeights.semibold,
            fill: theme.palette.neutralPrimary,
        },
        needle: {
            fill: theme.palette.black,
            stroke: theme.semanticColors.bodyBackground,
        },
        chartTitle: {
            fontSize: 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: [
            __assign(__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[HighContrastSelector] = {
                        forcedColorAdjust: 'none',
                    },
                    _a),
                borderLeft: "4px solid ".concat(lineColor),
                paddingLeft: '8px',
            },
            toDrawShape && {
                display: 'flex',
            },
        ],
        shapeStyles: {
            marginRight: '8px',
        },
        calloutlegendText: __assign(__assign({}, theme.fonts.small), { lineHeight: '16px', selectors: (_b = {},
                _b[HighContrastSelectorBlack] = {
                    color: 'rgb(255, 255, 255)',
                },
                _b), color: theme.semanticColors.bodySubtext }),
        calloutContentY: [
            __assign(__assign({}, theme.fonts.mediumPlus), { fontWeight: 'bold', lineHeight: '22px', selectors: (_c = {},
                    _c[HighContrastSelectorBlack] = {
                        color: 'rgb(255, 255, 255)',
                    },
                    _c) }),
        ],
        descriptionMessage: [
            theme.fonts.small,
            {
                selectors: (_d = {},
                    _d[HighContrastSelectorBlack] = {
                        color: 'rgb(255, 255, 255)',
                    },
                    _d),
                color: theme.semanticColors.bodyText,
                marginTop: '10px',
                paddingTop: '10px',
                borderTop: "1px solid ".concat(theme.semanticColors.menuDivider),
            },
        ],
    };
};
//# sourceMappingURL=GaugeChart.styles.js.map