define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var globalClassNames = {
        root: 'ms-TeachingBubble',
        body: 'ms-TeachingBubble-body',
        bodyContent: 'ms-TeachingBubble-bodycontent',
        closeButton: 'ms-TeachingBubble-closebutton',
        content: 'ms-TeachingBubble-content',
        footer: 'ms-TeachingBubble-footer',
        header: 'ms-TeachingBubble-header',
        headerIsCondensed: 'ms-TeachingBubble-header--condensed',
        headerIsSmall: 'ms-TeachingBubble-header--small',
        headerIsLarge: 'ms-TeachingBubble-header--large',
        headline: 'ms-TeachingBubble-headline',
        image: 'ms-TeachingBubble-image',
        primaryButton: 'ms-TeachingBubble-primaryButton',
        secondaryButton: 'ms-TeachingBubble-secondaryButton',
        subText: 'ms-TeachingBubble-subText',
        // TODO: Button global class name usage should be converted to a styles function once
        //        Button supports JS styling, which means these button names can be removed.
        button: 'ms-Button',
        buttonLabel: 'ms-Button-label'
    };
    var opacityFadeIn = Styling_1.keyframes({
        '0%': {
            opacity: 0,
            animationTimingFunction: Styling_1.AnimationVariables.easeFunction1,
            transform: 'scale3d(.90,.90,.90)'
        },
        '100%': {
            opacity: 1,
            transform: 'scale3d(1,1,1)'
        }
    });
    var rootStyle = function (isWide) {
        return [
            {
                display: 'block',
                maxWidth: 364,
                border: 0,
                outline: 'transparent',
                width: 'calc(100% + 1px)',
                animationName: "" + opacityFadeIn,
                animationDuration: '300ms',
                animationTimingFunction: 'linear',
                animationFillMode: 'both'
            },
            isWide && {
                maxWidth: 456
            }
        ];
    };
    var headerStyle = function (classNames, hasCondensedHeadline, hasSmallHeadline) {
        if (hasCondensedHeadline) {
            return [
                classNames.headerIsCondensed,
                {
                    marginBottom: 14
                }
            ];
        }
        return [
            hasSmallHeadline && classNames.headerIsSmall,
            !hasSmallHeadline && classNames.headerIsLarge,
            {
                selectors: {
                    ':not(:last-child)': {
                        marginBottom: 14
                    }
                }
            }
        ];
    };
    exports.getStyles = function (props) {
        var _a, _b, _c;
        var calloutClassName = props.calloutClassName, hasCondensedHeadline = props.hasCondensedHeadline, hasSmallHeadline = props.hasSmallHeadline, isWide = props.isWide, primaryButtonClassName = props.primaryButtonClassName, secondaryButtonClassName = props.secondaryButtonClassName, theme = props.theme;
        var hasLargeHeadline = !hasCondensedHeadline && !hasSmallHeadline;
        var palette = theme.palette, fonts = theme.fonts;
        var classNames = Styling_1.getGlobalClassNames(globalClassNames, theme);
        return {
            root: [classNames.root, fonts.medium, calloutClassName],
            body: [
                classNames.body,
                {
                    selectors: {
                        ':not(:last-child)': {
                            marginBottom: 20
                        }
                    }
                }
            ],
            bodyContent: [
                classNames.bodyContent,
                {
                    padding: '20px 24px 20px 24px'
                }
            ],
            closeButton: [
                classNames.closeButton,
                {
                    position: 'absolute',
                    right: 0,
                    top: 0,
                    margin: '15px 15px 0 0',
                    borderRadius: 0,
                    color: palette.white,
                    fontSize: fonts.small.fontSize,
                    selectors: {
                        ':hover': {
                            background: palette.themeDarkAlt,
                            color: palette.white
                        },
                        ':active': {
                            background: palette.themeDark,
                            color: palette.white
                        }
                    }
                }
            ],
            content: [
                classNames.content
            ].concat(rootStyle(isWide), [
                isWide && {
                    display: 'flex'
                }
            ]),
            footer: [
                classNames.footer,
                {
                    display: 'flex',
                    flex: 'auto',
                    alignItems: 'center',
                    color: palette.white,
                    selectors: (_a = {},
                        // TODO: global class name usage should be converted to a button styles function once Button supports JS styling
                        _a["." + classNames.button + ":not(:first-child)"] = {
                            marginLeft: 10
                        },
                        _a)
                }
            ],
            header: [
                classNames.header
            ].concat(headerStyle(classNames, hasCondensedHeadline, hasSmallHeadline), [
                (hasCondensedHeadline || hasSmallHeadline) && [
                    fonts.medium,
                    {
                        marginRight: 24,
                        fontWeight: Styling_1.FontWeights.semibold
                    }
                ]
            ]),
            headline: [
                classNames.headline,
                {
                    margin: 0,
                    color: palette.white,
                    fontWeight: Styling_1.FontWeights.semibold
                },
                hasLargeHeadline && [
                    {
                        fontSize: fonts.xLarge.fontSize
                    }
                ]
            ],
            imageContent: [
                classNames.header,
                classNames.image,
                isWide && {
                    display: 'flex',
                    alignItems: 'center',
                    maxWidth: 154
                }
            ],
            primaryButton: [
                classNames.primaryButton,
                primaryButtonClassName,
                {
                    backgroundColor: palette.white,
                    borderColor: palette.white,
                    color: palette.themePrimary,
                    whiteSpace: 'nowrap',
                    selectors: (_b = {},
                        // TODO: global class name usage should be converted to a button styles function once Button supports JS styling
                        _b["." + classNames.buttonLabel] = fonts.medium,
                        _b[':hover'] = {
                            backgroundColor: palette.themeLighter,
                            borderColor: palette.themeLighter,
                            color: palette.themePrimary
                        },
                        _b[':focus'] = {
                            backgroundColor: palette.themeLighter,
                            borderColor: palette.white
                        },
                        _b[':active'] = {
                            backgroundColor: palette.white,
                            borderColor: palette.white,
                            color: palette.themePrimary
                        },
                        _b)
                }
            ],
            secondaryButton: [
                classNames.secondaryButton,
                secondaryButtonClassName,
                {
                    backgroundColor: palette.themePrimary,
                    borderColor: palette.white,
                    whiteSpace: 'nowrap',
                    selectors: (_c = {},
                        // TODO: global class name usage should be converted to a button styles function once Button supports JS styling
                        _c["." + classNames.buttonLabel] = [
                            fonts.medium,
                            {
                                color: palette.white
                            }
                        ],
                        _c['&:hover, &:focus'] = {
                            backgroundColor: palette.themeDarkAlt,
                            borderColor: palette.white
                        },
                        _c[':active'] = {
                            backgroundColor: palette.themePrimary,
                            borderColor: palette.white
                        },
                        _c)
                }
            ],
            subText: [
                classNames.subText,
                {
                    margin: 0,
                    fontSize: fonts.medium.fontSize,
                    color: palette.white,
                    fontWeight: Styling_1.FontWeights.regular
                }
            ],
            subComponentStyles: {
                callout: {
                    root: rootStyle(isWide).concat([fonts.medium]),
                    beak: [
                        {
                            background: palette.themePrimary
                        }
                    ],
                    calloutMain: [
                        {
                            background: palette.themePrimary
                        }
                    ]
                }
            }
        };
    };
});
//# sourceMappingURL=TeachingBubble.styles.js.map