"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
var MS_CHECKBOX_LABEL_SIZE = '20px';
var MS_CHECKBOX_TRANSITION_DURATION = '200ms';
var MS_CHECKBOX_TRANSITION_TIMING = 'cubic-bezier(.4, 0, .23, 1)';
exports.getStyles = function (props) {
    var className = props.className, theme = props.theme, reversed = props.reversed, checked = props.checked, disabled = props.disabled, isUsingCustomLabelRender = props.isUsingCustomLabelRender;
    var semanticColors = theme.semanticColors;
    var checkmarkFontColor = semanticColors.inputForegroundChecked;
    var checkmarkFontColorCheckedDisabled = semanticColors.disabledBackground;
    var checkmarkFontColorHovered = semanticColors.inputBorder;
    var checkboxBorderColor = semanticColors.smallInputBorder;
    var checkboxBorderColorChecked = semanticColors.inputBackgroundChecked;
    var checkboxBorderColorDisabled = semanticColors.disabledBodySubtext;
    var checkboxBorderHoveredColor = semanticColors.inputBorderHovered;
    var checkboxBackgroundChecked = semanticColors.inputBackgroundChecked;
    var checkboxBackgroundCheckedHovered = semanticColors.inputBackgroundCheckedHovered;
    var checkboxBorderColorCheckedHovered = semanticColors.inputBackgroundCheckedHovered;
    var checkboxHoveredTextColor = semanticColors.bodyText;
    var checkboxBackgroundDisabledChecked = semanticColors.disabledBodySubtext;
    var checkboxTextColor = semanticColors.bodyText;
    var checkboxTextColorDisabled = semanticColors.disabledText;
    return {
        root: [
            'ms-Checkbox',
            {
                position: 'relative',
                display: 'flex'
            },
            reversed && 'reversed',
            checked && 'is-checked',
            !disabled && 'is-enabled',
            disabled && 'is-disabled',
            className
        ],
        input: [
            {
                position: 'absolute',
                background: 'none',
                opacity: 0,
                selectors: (_a = {},
                    _a["." + Utilities_1.IsFocusVisibleClassName + " &:focus + label::before"] = {
                        outline: '1px solid ' + theme.palette.neutralSecondary,
                        outlineOffset: '2px',
                        selectors: (_b = {},
                            _b[Styling_1.HighContrastSelector] = {
                                outline: '1px solid ActiveBorder'
                            },
                            _b)
                    },
                    _a)
            }
        ],
        label: [
            'ms-Checkbox-label',
            theme.fonts.medium,
            {
                display: 'flex',
                alignItems: isUsingCustomLabelRender ? 'center' : 'flex-start',
                cursor: disabled ? 'default' : 'pointer',
                position: 'relative',
                userSelect: 'none',
                textAlign: 'left'
            },
            reversed && {
                flexDirection: 'row-reverse',
                justifyContent: 'flex-end'
            },
            !disabled && [
                !checked && {
                    selectors: {
                        ':hover .ms-Checkbox-checkbox': {
                            borderColor: checkboxBorderHoveredColor,
                            selectors: (_c = {},
                                _c[Styling_1.HighContrastSelector] = {
                                    borderColor: 'Highlight'
                                },
                                _c)
                        },
                        ':focus .ms-Checkbox-checkbox': { borderColor: checkboxBorderHoveredColor },
                        ':hover .ms-Checkbox-checkmark': {
                            color: checkmarkFontColorHovered,
                            opacity: '1',
                            selectors: (_d = {},
                                _d[Styling_1.HighContrastSelector] = {
                                    color: 'Highlight'
                                },
                                _d)
                        }
                    }
                },
                checked && {
                    selectors: (_e = {
                            ':hover .ms-Checkbox-checkbox': {
                                background: checkboxBackgroundCheckedHovered,
                                borderColor: checkboxBorderColorCheckedHovered
                            },
                            ':focus .ms-Checkbox-checkbox': {
                                background: checkboxBackgroundCheckedHovered,
                                borderColor: checkboxBorderColorCheckedHovered
                            }
                        },
                        _e[Styling_1.HighContrastSelector] = {
                            selectors: {
                                ':hover .ms-Checkbox-checkbox': {
                                    background: 'Window',
                                    borderColor: 'Highlight'
                                },
                                ':focus .ms-Checkbox-checkbox': {
                                    background: 'Highlight'
                                },
                                ':focus:hover .ms-Checkbox-checkbox': {
                                    background: 'Highlight'
                                },
                                ':focus:hover .ms-Checkbox-checkmark': {
                                    color: 'Window'
                                },
                                ':hover .ms-Checkbox-checkmark': {
                                    color: 'Highlight'
                                }
                            }
                        },
                        _e)
                },
                {
                    selectors: {
                        ':hover .ms-Checkbox-text': { color: checkboxHoveredTextColor },
                        ':focus .ms-Checkbox-text': { color: checkboxHoveredTextColor }
                    }
                }
            ]
        ],
        checkbox: [
            'ms-Checkbox-checkbox',
            {
                display: 'flex',
                flexShrink: 0,
                alignItems: 'center',
                justifyContent: 'center',
                height: MS_CHECKBOX_LABEL_SIZE,
                width: MS_CHECKBOX_LABEL_SIZE,
                borderWidth: '1px',
                borderStyle: 'solid',
                borderColor: checkboxBorderColor,
                boxSizing: 'border-box',
                transitionProperty: 'background, border, border-color',
                transitionDuration: MS_CHECKBOX_TRANSITION_DURATION,
                transitionTimingFunction: MS_CHECKBOX_TRANSITION_TIMING,
                /* in case the icon is bigger than the box */
                overflow: 'hidden'
            },
            !reversed
                ? // this margin on the checkbox is for backwards compat.
                    // notably it has the effect where a customRender is used, there will be only a 4px margin from checkbox to label.
                    // the label by default would have another 4px margin for a total of 8px margin between checkbox and label.
                    // we don't combine the two (and move it into the text) to not incur a breaking change for everyone using custom render atm.
                    {
                        marginRight: 4
                    }
                : {
                    marginLeft: 4
                },
            !disabled &&
                checked && {
                background: checkboxBackgroundChecked,
                borderColor: checkboxBorderColorChecked,
                selectors: (_f = {},
                    _f[Styling_1.HighContrastSelector] = {
                        background: 'Highlight',
                        borderColor: 'Highlight'
                    },
                    _f)
            },
            disabled && {
                borderColor: checkboxBorderColorDisabled,
                selectors: (_g = {},
                    _g[Styling_1.HighContrastSelector] = {
                        borderColor: 'InactiveBorder'
                    },
                    _g)
            },
            checked &&
                disabled && {
                background: checkboxBackgroundDisabledChecked,
                borderColor: checkboxBorderColorDisabled
            }
        ],
        checkmark: [
            'ms-Checkbox-checkmark',
            {
                opacity: checked ? '1' : '0',
                color: checked && disabled ? checkmarkFontColorCheckedDisabled : checkmarkFontColor,
                selectors: (_h = {},
                    _h[Styling_1.HighContrastSelector] = {
                        color: disabled ? 'InactiveBorder' : 'Window',
                        MsHighContrastAdjust: 'none'
                    },
                    _h)
            }
        ],
        text: [
            'ms-Checkbox-text',
            {
                color: disabled ? checkboxTextColorDisabled : checkboxTextColor,
                fontSize: Styling_1.FontSizes.medium,
                lineHeight: '20px'
            },
            !reversed
                ? {
                    marginLeft: 4
                }
                : {
                    marginRight: 4
                },
            disabled && {
                selectors: (_j = {},
                    _j[Styling_1.HighContrastSelector] = {
                        // backwards compat for the color of the text when the checkbox was rendered
                        // using a Button.
                        color: 'InactiveBorder'
                    },
                    _j)
            }
        ]
    };
    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
};
//# sourceMappingURL=Checkbox.styles.js.map