"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
exports.getStyles = function (props) {
    var theme = props.theme, className = props.className, disabled = props.disabled, checked = props.checked;
    var semanticColors = theme.semanticColors;
    var pillUncheckedBackground = semanticColors.bodyBackground;
    var pillCheckedBackground = semanticColors.inputBackgroundChecked;
    var pillCheckedHoveredBackground = semanticColors.inputBackgroundCheckedHovered;
    var pillCheckedDisabledBackground = semanticColors.disabledBodyText;
    var thumbBackground = semanticColors.inputBorderHovered;
    var thumbCheckedBackground = semanticColors.inputForegroundChecked;
    var thumbDisabledBackground = semanticColors.disabledBodyText;
    var thumbCheckedDisabledBackground = semanticColors.disabledBackground;
    var pillBorderColor = semanticColors.smallInputBorder;
    var pillBorderHoveredColor = semanticColors.inputBorderHovered;
    var pillBorderDisabledColor = semanticColors.disabledBodyText;
    var textDisabledColor = semanticColors.disabledText;
    return {
        root: [
            'ms-Toggle',
            checked && 'is-checked',
            !disabled && 'is-enabled',
            disabled && 'is-disabled',
            theme.fonts.medium,
            {
                marginBottom: '8px'
            },
            className,
        ],
        label: [
            'ms-Toggle-label',
            disabled && {
                color: textDisabledColor,
                selectors: (_a = {},
                    _a[Styling_1.HighContrastSelector] = {
                        color: 'GrayText'
                    },
                    _a)
            }
        ],
        container: [
            'ms-Toggle-innerContainer',
            {
                display: 'inline-flex',
                position: 'relative',
            }
        ],
        pill: [
            'ms-Toggle-background',
            Styling_1.getFocusStyle(theme, -3),
            {
                fontSize: '20px',
                boxSizing: 'border-box',
                width: '2.2em',
                height: '1em',
                borderRadius: '1em',
                transition: 'all 0.1s ease',
                borderWidth: '1px',
                borderStyle: 'solid',
                background: pillUncheckedBackground,
                borderColor: pillBorderColor,
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                padding: '0 .2em'
            },
            !disabled && [
                !checked && {
                    selectors: {
                        ':hover': [
                            {
                                borderColor: pillBorderHoveredColor
                            }
                        ]
                    }
                },
                checked && [
                    {
                        background: pillCheckedBackground,
                        borderColor: 'transparent',
                        justifyContent: 'flex-end'
                    },
                    {
                        selectors: (_b = {
                                ':hover': [
                                    {
                                        backgroundColor: pillCheckedHoveredBackground,
                                        borderColor: 'transparent'
                                    }
                                ]
                            },
                            _b[Styling_1.HighContrastSelector] = {
                                backgroundColor: 'WindowText'
                            },
                            _b)
                    }
                ]
            ],
            disabled && [
                {
                    cursor: 'default'
                },
                !checked && [
                    {
                        borderColor: pillBorderDisabledColor
                    }
                ],
                checked && [
                    {
                        backgroundColor: pillCheckedDisabledBackground,
                        borderColor: 'transparent',
                        justifyContent: 'flex-end'
                    }
                ],
            ],
            !disabled && {
                selectors: {
                    '&:hover': {
                        selectors: (_c = {},
                            _c[Styling_1.HighContrastSelector] = {
                                borderColor: 'Highlight'
                            },
                            _c)
                    }
                }
            }
        ],
        thumb: [
            'ms-Toggle-thumb',
            {
                width: '.5em',
                height: '.5em',
                borderRadius: '.5em',
                transition: 'all 0.1s ease',
                backgroundColor: thumbBackground,
                /* Border is added to handle high contrast mode for Firefox */
                borderColor: 'transparent',
                borderWidth: '.28em',
                borderStyle: 'solid',
                boxSizing: 'border-box'
            },
            !disabled && checked && [
                {
                    backgroundColor: thumbCheckedBackground,
                    selectors: (_d = {},
                        _d[Styling_1.HighContrastSelector] = {
                            backgroundColor: 'Window',
                            borderColor: 'Window'
                        },
                        _d)
                }
            ],
            disabled && [
                !checked && [
                    {
                        backgroundColor: thumbDisabledBackground,
                    }
                ],
                checked && [
                    {
                        backgroundColor: thumbCheckedDisabledBackground,
                    }
                ]
            ]
        ],
        text: [
            'ms-Toggle-stateText',
            {
                selectors: {
                    // Workaround: make rules more sepecific than Label rules.
                    '&&': {
                        padding: '0',
                        margin: '0 10px',
                        userSelect: 'none',
                    }
                }
            },
            disabled && {
                selectors: {
                    '&&': {
                        color: textDisabledColor,
                        selectors: (_e = {},
                            _e[Styling_1.HighContrastSelector] = {
                                color: 'GrayText'
                            },
                            _e)
                    }
                }
            }
        ]
    };
    var _a, _b, _c, _d, _e;
};
//# sourceMappingURL=Toggle.styles.js.map