define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.COACHMARK_WIDTH = 32;
    exports.COACHMARK_HEIGHT = 32;
    exports.translateOne = Styling_1.keyframes({
        '0%': {
            transform: 'translate(0, 0)',
            animationTimingFunction: 'linear'
        },
        '78.57%': {
            transform: 'translate(0, 0)',
            animationTimingFunction: 'cubic-bezier(0.62, 0, 0.56, 1)'
        },
        '82.14%': {
            transform: 'translate(0, -5px)',
            animationTimingFunction: 'cubic-bezier(0.58, 0, 0, 1)'
        },
        '84.88%': {
            transform: 'translate(0, 9px)',
            animationTimingFunction: 'cubic-bezier(1, 0, 0.56, 1)'
        },
        '88.1%': {
            transform: 'translate(0, -2px)',
            animationTimingFunction: 'cubic-bezier(0.58, 0, 0.67, 1)'
        },
        '90.12%': {
            transform: 'translate(0, 0)',
            animationTimingFunction: 'linear'
        },
        '100%': {
            transform: 'translate(0, 0)'
        }
    });
    exports.scaleOne = Styling_1.keyframes({
        '0%': {
            transform: ' scale(0)',
            animationTimingFunction: 'linear'
        },
        '14.29%': {
            transform: 'scale(0)',
            animationTimingFunction: 'cubic-bezier(0.84, 0, 0.52, 0.99)'
        },
        '16.67%': {
            transform: 'scale(1.15)',
            animationTimingFunction: 'cubic-bezier(0.48, -0.01, 0.52, 1.01)'
        },
        '19.05%': {
            transform: 'scale(0.95)',
            animationTimingFunction: 'cubic-bezier(0.48, 0.02, 0.52, 0.98)'
        },
        '21.43%': {
            transform: 'scale(1)',
            animationTimingFunction: 'linear'
        },
        '42.86%': {
            transform: 'scale(1)',
            animationTimingFunction: 'cubic-bezier(0.48, -0.02, 0.52, 1.02)'
        },
        '45.71%': {
            transform: 'scale(0.8)',
            animationTimingFunction: 'cubic-bezier(0.48, 0.01, 0.52, 0.99)'
        },
        '50%': {
            transform: 'scale(1)',
            animationTimingFunction: 'linear'
        },
        '90.12%': {
            transform: 'scale(1)',
            animationTimingFunction: 'cubic-bezier(0.48, -0.02, 0.52, 1.02)'
        },
        '92.98%': {
            transform: 'scale(0.8)',
            animationTimingFunction: 'cubic-bezier(0.48, 0.01, 0.52, 0.99)'
        },
        '97.26%': {
            transform: 'scale(1)',
            animationTimingFunction: 'linear'
        },
        '100%': {
            transform: 'scale(1)'
        }
    });
    exports.rotateOne = Styling_1.keyframes({
        '0%': {
            transform: 'rotate(0deg)',
            animationTimingFunction: 'linear'
        },
        '83.33%': {
            transform: ' rotate(0deg)',
            animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
        },
        '83.93%': {
            transform: 'rotate(15deg)',
            animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
        },
        '84.52%': {
            transform: 'rotate(-15deg)',
            animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
        },
        '85.12%': {
            transform: 'rotate(15deg)',
            animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
        },
        '85.71%': {
            transform: 'rotate(-15deg)',
            animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
        },
        '86.31%': {
            transform: 'rotate(0deg)',
            animationTimingFunction: 'linear'
        },
        '100%': {
            transform: 'rotate(0deg)'
        }
    });
    function getStyles(props, theme) {
        if (theme === void 0) { theme = Styling_1.getTheme(); }
        var animationInnerDimension = '35px';
        var animationOuterDimension = '150px';
        var animationBorderWidth = '10px';
        var ContinuousPulse = Styling_1.PulsingBeaconAnimationStyles.continuousPulseAnimationDouble(props.beaconColorOne ? props.beaconColorOne : theme.palette.themePrimary, props.beaconColorTwo ? props.beaconColorTwo : theme.palette.themeTertiary, animationInnerDimension, animationOuterDimension, animationBorderWidth);
        var ContinuousPulseAnimation = Styling_1.PulsingBeaconAnimationStyles.createDefaultAnimation(ContinuousPulse);
        return {
            root: [
                {
                    position: 'relative'
                }
            ],
            pulsingBeacon: [
                {
                    position: 'absolute',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                    width: '0px',
                    height: '0px',
                    borderRadius: '225px',
                    borderStyle: 'solid',
                    opacity: '0'
                },
                props.isCollapsed && props.isBeaconAnimating && ContinuousPulseAnimation
            ],
            // Translate Animation Layer
            translateAnimationContainer: [
                {
                    width: '100%',
                    height: '100%'
                },
                props.isCollapsed && {
                    animationDuration: '14s',
                    animationTimingFunction: 'linear',
                    animationDirection: 'normal',
                    animationIterationCount: '1',
                    animationDelay: '0s',
                    animationFillMode: 'forwards',
                    animationName: exports.translateOne,
                    transition: 'opacity 0.5s ease-in-out'
                },
                !props.isCollapsed && {
                    opacity: '1'
                }
            ],
            // Scale Animation Layer
            scaleAnimationLayer: [
                {
                    width: '100%',
                    height: '100%'
                },
                props.isCollapsed && {
                    animationDuration: '14s',
                    animationTimingFunction: 'linear',
                    animationDirection: 'normal',
                    animationIterationCount: '1',
                    animationDelay: '0s',
                    animationFillMode: 'forwards',
                    animationName: exports.scaleOne
                }
            ],
            // Rotate Animation Layer
            rotateAnimationLayer: [
                {
                    width: '100%',
                    height: '100%'
                },
                props.isCollapsed && {
                    animationDuration: '14s',
                    animationTimingFunction: 'linear',
                    animationDirection: 'normal',
                    animationIterationCount: '1',
                    animationDelay: '0s',
                    animationFillMode: 'forwards',
                    animationName: exports.rotateOne
                },
                !props.isCollapsed && {
                    opacity: '1'
                }
            ],
            // Layer Host, defaults to collapsed
            entityHost: [
                {
                    position: 'relative',
                    outline: 'none',
                    overflow: 'hidden',
                    backgroundColor: props.color,
                    borderRadius: exports.COACHMARK_WIDTH,
                    transition: 'border-radius 250ms, width 500ms, height 500ms cubic-bezier(0.5, 0, 0, 1)',
                    visibility: 'hidden'
                },
                !props.isMeasuring && {
                    width: exports.COACHMARK_WIDTH,
                    height: exports.COACHMARK_HEIGHT,
                    visibility: 'visible'
                },
                !props.isCollapsed && {
                    borderRadius: '1px',
                    opacity: '1',
                    width: props.entityHostWidth,
                    height: props.entityHostHeight
                }
            ],
            entityInnerHost: [
                {
                    transition: 'transform 500ms cubic-bezier(0.5, 0, 0, 1)',
                    transformOrigin: props.transformOrigin,
                    transform: 'scale(0)'
                },
                !props.isCollapsed && {
                    width: props.entityHostWidth,
                    height: props.entityHostHeight,
                    transform: 'scale(1)'
                },
                !props.isMeasuring && {
                    visibility: 'visible'
                }
            ],
            ariaContainer: {
                position: 'fixed',
                opacity: 0
            }
        };
    }
    exports.getStyles = getStyles;
});
//# sourceMappingURL=Coachmark.styles.js.map