import { concatStyleSets, getFocusStyle, FontSizes } from '../../Styling';
import { memoizeFunction } from '../../Utilities';
var MS_CHECKBOX_LABEL_SIZE = '20px';
var MS_CHECKBOX_TRANSITION_DURATION = '200ms';
var MS_CHECKBOX_TRANSITION_TIMING = 'cubic-bezier(.4, 0, .23, 1)';
export var getStyles = memoizeFunction(function (theme, customStyles) {
    var semanticColors = theme.semanticColors, palette = theme.palette;
    var checkmarkFontColor = semanticColors.inputForegroundChecked;
    var checkmarkFontColorCheckedDisabled = semanticColors.disabledBackground;
    var checkboxBorderColor = semanticColors.smallInputBorder;
    var checkboxBorderColorChecked = semanticColors.inputBackgroundChecked;
    var checkboxBorderColorDisabled = semanticColors.disabledBodyText;
    var checkboxBorderHoveredColor = semanticColors.inputBorderHovered;
    var checkboxBackgroundChecked = semanticColors.inputBackgroundChecked;
    var checkboxBackgroundCheckedHovered = semanticColors.inputBackgroundCheckedHovered;
    var checkboxBorderColorCheckedHovered = semanticColors.inputBackgroundCheckedHovered;
    var checkboxBackgroundDisabled = semanticColors.disabledBodyText;
    var checkboxTextColor = semanticColors.bodyText;
    var checkboxTextColorDisabled = semanticColors.disabledText;
    var styles = {
        root: [
            getFocusStyle(theme, -2),
            {
                padding: '0',
                border: 'none',
                background: 'none',
                margin: '0',
                outline: 'none',
                display: 'block',
                cursor: 'pointer',
            }
        ],
        label: {
            display: 'inline-flex',
            margin: '0 -4px',
            alignItems: 'center',
            cursor: 'pointer',
            position: 'relative',
            textAlign: 'left'
        },
        labelReversed: {
            flexDirection: 'row-reverse',
            justifyContent: 'flex-end'
        },
        labelDisabled: {
            cursor: 'default'
        },
        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,
            margin: '0 4px',
            boxSizing: 'border-box',
            transitionProperty: 'background, border, border-color',
            transitionDuration: MS_CHECKBOX_TRANSITION_DURATION,
            transitionTimingFunction: MS_CHECKBOX_TRANSITION_TIMING,
            userSelect: 'none',
            /* incase the icon is bigger than the box */
            overflow: 'hidden'
        },
        checkboxHovered: {
            borderColor: checkboxBorderHoveredColor,
        },
        checkboxFocused: {
            borderColor: checkboxBorderHoveredColor,
        },
        checkboxChecked: {
            background: checkboxBackgroundChecked,
            borderColor: checkboxBorderColorChecked
        },
        checkboxCheckedHovered: {
            background: checkboxBackgroundCheckedHovered,
            borderColor: checkboxBorderColorCheckedHovered
        },
        checkboxCheckedFocused: {
            background: checkboxBackgroundCheckedHovered,
            borderColor: checkboxBorderColorCheckedHovered
        },
        checkboxDisabled: {
            borderColor: checkboxBorderColorDisabled
        },
        checkboxCheckedDisabled: {
            background: checkboxBackgroundDisabled,
            borderColor: checkboxBorderColorDisabled
        },
        checkmark: {
            opacity: '0',
            color: checkmarkFontColor
        },
        checkmarkChecked: {
            opacity: '1'
        },
        checkmarkDisabled: {},
        checkmarkCheckedDisabled: {
            opacity: '1',
            color: checkmarkFontColorCheckedDisabled,
        },
        text: {
            color: checkboxTextColor,
            margin: '0 4px',
            fontSize: FontSizes.medium
        },
        textHovered: {
            color: palette.black,
        },
        textFocused: {
            color: palette.black,
        },
        textDisabled: {
            color: checkboxTextColorDisabled,
        }
    };
    return concatStyleSets(styles, customStyles);
});
//# sourceMappingURL=Checkbox.styles.js.map