"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var tslib_1 = require("tslib");
var Styling_1 = require("@fluentui/react/lib/Styling");
var getStyles = function (props) {
    var _a, _b;
    var className = props.className, theme = props.theme, _c = props.isLineLegendInBarChart, isLineLegendInBarChart = _c === void 0 ? false : _c;
    var _d = theme, palette = _d.palette, fonts = _d.fonts;
    var options = {
        inset: undefined,
        position: undefined,
        highContrastStyle: {
            outlineColor: theme.semanticColors.focusBorder,
        },
        borderColor: 'transparent',
        outlineColor: undefined,
    };
    return {
        root: [
            {
                whiteSpace: 'nowrap',
                width: '100%',
                alignItems: 'center',
                margin: '-8px 0 0 -8px',
            },
            className,
        ],
        legend: [
            (0, Styling_1.getFocusStyle)(theme, options),
            {
                display: 'flex',
                alignItems: 'center',
                cursor: 'pointer',
                border: 'none',
                padding: '8px',
                background: 'none',
                textTransform: 'capitalize',
            },
        ],
        rect: {
            selectors: (_a = {},
                _a[Styling_1.HighContrastSelector] = {
                    content: "linear-gradient(to right, ".concat(props.colorOnSelectedState, ", ").concat(props.colorOnSelectedState, ")"),
                    opacity: props.colorOnSelectedState === theme.semanticColors.buttonBackground ? '0.6' : '',
                },
                _a),
            width: '12px',
            height: isLineLegendInBarChart ? '4px' : '12px',
            backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,
            marginRight: '8px',
            border: '1px solid',
            borderColor: props.borderColor ? props.borderColor : theme === null || theme === void 0 ? void 0 : theme.semanticColors.buttonBorder,
            content: props.stripePattern
                ? // eslint-disable-next-line @fluentui/max-len
                    "repeating-linear-gradient(135deg, transparent, transparent 3px, ".concat(props.colorOnSelectedState, " 1px, ").concat(props.colorOnSelectedState, " 4px)")
                : '',
        },
        shape: [
            {
                marginRight: '8px',
            },
        ],
        triangle: {
            width: '0',
            height: '0',
            borderLeft: '6px solid transparent',
            borderRight: '6px solid transparent',
            borderTop: '10.4px solid',
            borderTopColor: props.colorOnSelectedState,
            marginRight: '8px',
            opacity: props.colorOnSelectedState === theme.semanticColors.buttonBackground
                ? '0.6'
                : props.opacity
                    ? props.opacity
                    : '',
            selectors: (_b = {},
                _b[Styling_1.HighContrastSelector] = {
                    border: '0px',
                    height: '10.4px',
                    width: '10.4px',
                    clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
                    backgroundImage: "linear-gradient(to right, ".concat(props.colorOnSelectedState, ", ").concat(props.colorOnSelectedState, ")"),
                },
                _b),
        },
        text: tslib_1.__assign(tslib_1.__assign({}, fonts.small), { lineHeight: '16px', color: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, opacity: props.colorOnSelectedState === theme.semanticColors.buttonBackground ? '0.67' : '' }),
        hoverChange: {
            width: '12px',
            height: '12px',
            backgroundColor: theme.semanticColors.buttonBackground,
            marginRight: '8px',
            border: '1px solid',
            borderColor: props.borderColor ? props.borderColor : palette.black,
        },
        overflowIndicationTextStyle: [
            (0, Styling_1.getFocusStyle)(theme, options),
            tslib_1.__assign(tslib_1.__assign({ cursor: 'pointer', color: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText }, fonts.small), { lineHeight: '16px', padding: '8px' }),
        ],
        hoverCardRoot: {
            padding: '8px',
        },
        subComponentStyles: {
            hoverCardStyles: {
                host: [(0, Styling_1.getFocusStyle)(theme, options)],
            },
        },
    };
};
exports.getStyles = getStyles;
//# sourceMappingURL=Legends.styles.js.map