import { FontSizes, FontWeights, HighContrastSelector, getGlobalClassNames } from '../../../Styling';
var GlobalClassNames = {
    root: 'ms-ChoiceField',
    choiceFieldWrapper: 'ms-ChoiceField-wrapper',
    input: 'ms-ChoiceField-input',
    field: 'ms-ChoiceField-field',
    innerField: 'ms-ChoiceField-innerField',
    imageWrapper: 'ms-ChoiceField-imageWrapper',
    iconWrapper: 'ms-ChoiceField-iconWrapper',
    labelWrapper: 'ms-ChoiceField-labelWrapper'
};
var labelWrapperLineHeight = 15;
var iconSize = 32;
var choiceFieldSize = 20;
var choiceFieldTransitionDuration = '200ms';
var choiceFieldTransitionTiming = 'cubic-bezier(.4, 0, .23, 1)';
var radioButtonSpacing = 3;
var radioButtonInnerSize = 5;
function getChoiceGroupFocusStyle(palette, hasIconOrImage) {
    return [
        'is-inFocus',
        {
            selectors: {
                '.ms-Fabric.is-focusVisible &': {
                    position: 'relative',
                    outline: 'transparent',
                    selectors: {
                        '::-moz-focus-inner': {
                            border: 0
                        },
                        ':after': {
                            content: '""',
                            top: -2,
                            right: -2,
                            bottom: -2,
                            left: -2,
                            pointerEvents: 'none',
                            border: '1px solid ' + (hasIconOrImage ? palette.neutralSecondary : palette.neutralPrimary),
                            position: 'absolute',
                            selectors: (_a = {},
                                _a[HighContrastSelector] = {
                                    borderColor: 'WindowText',
                                    borderWidth: hasIconOrImage ? 1 : 2
                                },
                                _a)
                        }
                    }
                }
            }
        }
    ];
    var _a;
}
function getImageWrapperStyle(isSelectedImageWrapper, className, checked) {
    return [
        className,
        {
            paddingBottom: 2,
            transitionProperty: 'opacity',
            transitionDuration: choiceFieldTransitionDuration,
            transitionTimingFunction: 'ease',
            selectors: {
                '.ms-Image': {
                    display: 'inline-block',
                    borderStyle: 'none'
                }
            }
        },
        (checked ? !isSelectedImageWrapper : isSelectedImageWrapper) && [
            'is-hidden',
            {
                position: 'absolute',
                left: 0,
                top: 0,
                width: '100%',
                height: '100%',
                overflow: 'hidden',
                opacity: 0
            }
        ]
    ];
}
export var getStyles = function (props) {
    var theme = props.theme, hasIcon = props.hasIcon, hasImage = props.hasImage, checked = props.checked, disabled = props.disabled, imageIsLarge = props.imageIsLarge, focused = props.focused;
    var palette = theme.palette, semanticColors = theme.semanticColors;
    var classNames = getGlobalClassNames(GlobalClassNames, theme);
    var fieldHoverOrFocusProperties = {
        selectors: {
            '.ms-Label': {
                color: semanticColors.bodyTextChecked
            },
            ':before': {
                borderColor: checked ? semanticColors.inputBackgroundCheckedHovered : semanticColors.inputBorderHovered
            }
        }
    };
    var enabledFieldWithImageHoverOrFocusProperties = {
        borderColor: checked ? palette.themeDark : palette.neutralTertiaryAlt,
        selectors: {
            ':before': {
                opacity: 1,
                borderColor: checked ? palette.themeDark : semanticColors.inputBorderHovered
            }
        }
    };
    var circleAreaProperties = [
        {
            content: '""',
            display: 'inline-block',
            backgroundColor: semanticColors.bodyBackground,
            borderWidth: 1,
            borderStyle: 'solid',
            borderColor: semanticColors.smallInputBorder,
            width: choiceFieldSize,
            height: choiceFieldSize,
            fontWeight: 'normal',
            position: 'absolute',
            top: 0,
            left: 0,
            boxSizing: 'border-box',
            transitionProperty: 'border-color',
            transitionDuration: choiceFieldTransitionDuration,
            transitionTimingFunction: choiceFieldTransitionTiming,
            borderRadius: '50%'
        },
        disabled && {
            backgroundColor: checked ? semanticColors.bodyBackground : semanticColors.disabledText,
            borderColor: semanticColors.disabledText,
            selectors: (_a = {},
                _a[HighContrastSelector] = {
                    color: 'GrayText'
                },
                _a)
        },
        checked && {
            borderWidth: 1,
            borderStyle: 'solid',
            borderColor: semanticColors.inputBackgroundChecked,
            selectors: (_b = {},
                _b[HighContrastSelector] = {
                    borderColor: 'Highlight'
                },
                _b)
        },
        (hasIcon || hasImage) && {
            top: radioButtonSpacing,
            right: radioButtonSpacing,
            left: 'auto',
            opacity: !disabled && checked ? 1 : 0
        }
    ];
    var dotAreaProperties = [
        {
            content: '""',
            width: 0,
            height: 0,
            borderRadius: '50%',
            position: 'absolute',
            left: choiceFieldSize / 2,
            right: 0,
            transitionProperty: 'border-width',
            transitionDuration: choiceFieldTransitionDuration,
            transitionTimingFunction: choiceFieldTransitionTiming,
            boxSizing: 'border-box'
        },
        checked && {
            borderWidth: 5,
            borderStyle: 'solid',
            borderColor: semanticColors.inputBackgroundChecked,
            left: 5,
            top: 5,
            width: 10,
            height: 10,
            selectors: (_c = {},
                _c[HighContrastSelector] = {
                    borderColor: 'Highlight'
                },
                _c)
        },
        checked &&
            (hasIcon || hasImage) && {
            top: radioButtonSpacing + radioButtonInnerSize,
            right: radioButtonSpacing + radioButtonInnerSize,
            left: 'auto' // To reset the value of 'left' to its default value, so that 'right' works
        }
    ];
    return {
        root: [
            classNames.root,
            {
                display: 'flex',
                alignItems: 'center',
                boxSizing: 'border-box',
                color: semanticColors.bodyText,
                fontSize: FontSizes.medium,
                fontWeight: FontWeights.regular,
                minHeight: 26,
                border: 'none',
                position: 'relative',
                marginTop: 8,
                selectors: {
                    '.ms-Label': {
                        fontSize: FontSizes.medium,
                        display: 'inline-block'
                    }
                }
            },
            !hasIcon &&
                !hasImage && {
                selectors: {
                    '.ms-Label': {
                        paddingLeft: '26px'
                    }
                }
            },
            hasImage && 'ms-ChoiceField--image',
            hasIcon && 'ms-ChoiceField--icon',
            (hasIcon || hasImage) && {
                display: 'inline-flex',
                fontSize: 0,
                margin: '0 4px 4px 0',
                paddingLeft: 0,
                backgroundColor: palette.neutralLighter,
                height: '100%'
            }
        ],
        choiceFieldWrapper: [
            classNames.choiceFieldWrapper,
            focused && getChoiceGroupFocusStyle(palette, hasIcon || hasImage)
        ],
        // The hidden input
        input: [
            classNames.input,
            {
                position: 'absolute',
                opacity: 0,
                top: 8
            },
            (hasIcon || hasImage) && {
                top: 0,
                right: 0,
                opacity: 0,
                width: '100%',
                height: '100%',
                margin: 0
            }
        ],
        field: [
            classNames.field,
            {
                display: 'inline-block',
                cursor: 'pointer',
                marginTop: 0,
                position: 'relative',
                verticalAlign: 'top',
                userSelect: 'none',
                minHeight: 20,
                selectors: {
                    ':hover': !disabled && fieldHoverOrFocusProperties,
                    ':focus': !disabled && fieldHoverOrFocusProperties,
                    // The circle
                    ':before': circleAreaProperties,
                    // The dot
                    ':after': dotAreaProperties
                }
            },
            hasIcon && 'ms-ChoiceField--icon',
            hasImage && 'ms-ChoiceField-field--image',
            (hasIcon || hasImage) && {
                boxSizing: 'content-box',
                cursor: 'pointer',
                paddingTop: 22,
                margin: 0,
                textAlign: 'center',
                transitionProperty: 'all',
                transitionDuration: choiceFieldTransitionDuration,
                transitionTimingFunction: 'ease',
                border: '2px solid transparent',
                justifyContent: 'center',
                alignItems: 'center',
                display: 'flex',
                flexDirection: 'column'
            },
            checked && {
                borderColor: palette.themePrimary
            },
            (hasIcon || hasImage) &&
                !disabled && {
                selectors: {
                    ':hover': enabledFieldWithImageHoverOrFocusProperties,
                    ':focus': enabledFieldWithImageHoverOrFocusProperties
                }
            },
            disabled && {
                cursor: 'default',
                selectors: (_d = {
                        '.ms-Label': {
                            color: semanticColors.disabledBodyText
                        }
                    },
                    _d[HighContrastSelector] = {
                        color: 'GrayText'
                    },
                    _d)
            }
        ],
        innerField: [
            classNames.innerField,
            (hasIcon || hasImage) && {
                position: 'relative',
                display: 'inline-block',
                paddingLeft: 30,
                paddingRight: 30
            },
            (hasIcon || hasImage) &&
                imageIsLarge && {
                paddingLeft: 24,
                paddingRight: 24
            },
            (hasIcon || hasImage) &&
                disabled && {
                opacity: 0.25,
                selectors: (_e = {},
                    _e[HighContrastSelector] = {
                        color: 'GrayText',
                        opacity: 1
                    },
                    _e)
            }
        ],
        imageWrapper: getImageWrapperStyle(false, classNames.imageWrapper, checked),
        selectedImageWrapper: getImageWrapperStyle(true, classNames.imageWrapper, checked),
        iconWrapper: [
            classNames.iconWrapper,
            {
                fontSize: iconSize,
                lineHeight: iconSize,
                height: iconSize
            }
        ],
        labelWrapper: [
            classNames.labelWrapper,
            (hasIcon || hasImage) && {
                display: 'block',
                position: 'relative',
                margin: '4px 8px',
                height: labelWrapperLineHeight * 2,
                lineHeight: labelWrapperLineHeight,
                overflow: 'hidden',
                whiteSpace: 'pre-wrap',
                textOverflow: 'ellipsis',
                fontSize: FontSizes.medium,
                fontWeight: FontWeights.regular
            }
        ]
    };
    var _a, _b, _c, _d, _e;
};
//# sourceMappingURL=ChoiceGroupOption.styles.js.map