"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
    if (theme === void 0) { theme = Styling_1.getTheme(); }
    var semanticColors = theme.semanticColors;
    var pillUncheckedBackground = semanticColors.bodyBackground;
    var pillCheckedBackground = semanticColors.inputBackgroundSelected;
    var pillCheckedHoveredBackground = semanticColors.inputBackgroundSelectedHovered;
    var pillCheckedDisabledBackground = semanticColors.disabledText;
    var thumbBackground = semanticColors.inputBorderHovered;
    var thumbCheckedBackground = semanticColors.inputForegroundSelected;
    var thumbDisabledBackground = semanticColors.disabledText;
    var thumbCheckedDisabledBackground = semanticColors.disabledBackground;
    var pillBorderColor = semanticColors.inputBorder;
    var pillBorderHoveredColor = semanticColors.inputBorderHovered;
    var pillBorderDisabledColor = semanticColors.disabledText;
    var toggleFocusBorderColor = semanticColors.focusBorder;
    var styles = {
        root: {
            marginBottom: '8px'
        },
        container: [
            {
                display: 'inline-flex',
                position: 'relative',
            }
        ],
        pill: [
            Styling_1.getFocusStyle(theme, '-1px'),
            {
                fontSize: '20px',
                lineHeight: '1em',
                boxSizing: 'border-box',
                position: 'relative',
                width: '2.2em',
                height: '1em',
                borderRadius: '1em',
                transition: 'all 0.1s ease',
                borderWidth: '1px',
                borderStyle: 'solid',
                background: pillUncheckedBackground,
                borderColor: pillBorderColor,
            }
        ],
        pillHovered: {
            borderColor: pillBorderHoveredColor
        },
        pillChecked: {
            background: pillCheckedBackground,
            borderColor: 'transparent',
        },
        pillCheckedHovered: {
            backgroundColor: pillCheckedHoveredBackground,
            borderColor: 'transparent'
        },
        pillDisabled: {
            borderColor: pillBorderDisabledColor
        },
        pillCheckedDisabled: {
            backgroundColor: pillCheckedDisabledBackground,
            borderColor: 'transparent'
        },
        thumb: {
            width: '.5em',
            height: '.5em',
            borderRadius: '.5em',
            position: 'absolute',
            top: '.2em',
            transition: 'all 0.1s ease',
            backgroundColor: thumbBackground,
            left: '.2em'
        },
        thumbChecked: {
            backgroundColor: thumbCheckedBackground,
            left: '1.4em'
        },
        thumbDisabled: {
            backgroundColor: thumbDisabledBackground,
            left: '.2em',
        },
        thumbCheckedDisabled: {
            backgroundColor: thumbCheckedDisabledBackground,
            left: '1.4em'
        },
        text: {
            // Workaround; until Label is converted and we can pass in custom styles, we need to make this
            // more specific. Once Label is converted, we should be able to just pull in the customized styling.
            '.ms-Toggle-stateText': {
                padding: '0',
                margin: '0 10px',
                userSelect: 'none'
            }
        }
    };
    return Styling_1.mergeStyleSets(styles, customStyles);
});

//# sourceMappingURL=Toggle.styles.js.map
