define(["require", "exports", "../../Styling", "../../Utilities"], function (require, exports, Styling_1, Utilities_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var GlobalClassNames = {
        root: 'ms-Shimmer-container',
        shimmerWrapper: 'ms-Shimmer-shimmerWrapper',
        shimmerGradient: 'ms-Shimmer-shimmerGradient',
        dataWrapper: 'ms-Shimmer-dataWrapper'
    };
    var BACKGROUND_OFF_SCREEN_POSITION = '100%';
    var shimmerAnimation = Styling_1.keyframes({
        '0%': {
            transform: "translateX(-" + BACKGROUND_OFF_SCREEN_POSITION + ")"
        },
        '100%': {
            transform: "translateX(" + BACKGROUND_OFF_SCREEN_POSITION + ")"
        }
    });
    var shimmerAnimationRTL = Styling_1.keyframes({
        '100%': {
            transform: "translateX(-" + BACKGROUND_OFF_SCREEN_POSITION + ")"
        },
        '0%': {
            transform: "translateX(" + BACKGROUND_OFF_SCREEN_POSITION + ")"
        }
    });
    function getStyles(props) {
        var _a;
        var isDataLoaded = props.isDataLoaded, className = props.className, theme = props.theme, transitionAnimationInterval = props.transitionAnimationInterval, shimmerColor = props.shimmerColor, shimmerWaveColor = props.shimmerWaveColor;
        var semanticColors = theme.semanticColors;
        var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
        var isRTL = Utilities_1.getRTL();
        return {
            root: [
                classNames.root,
                theme.fonts.medium,
                {
                    position: 'relative',
                    height: 'auto'
                },
                className
            ],
            shimmerWrapper: [
                classNames.shimmerWrapper,
                {
                    position: 'relative',
                    overflow: 'hidden',
                    transform: 'translateZ(0)',
                    backgroundColor: shimmerColor || semanticColors.disabledBackground,
                    transition: "opacity " + transitionAnimationInterval + "ms",
                    selectors: (_a = {
                            '> *': {
                                transform: 'translateZ(0)'
                            }
                        },
                        _a[Styling_1.HighContrastSelector] = {
                            background: "WindowText\n                        linear-gradient(\n                          to right,\n                          transparent 0%,\n                          Window 50%,\n                          transparent 100%)\n                        0 0 / 90% 100%\n                        no-repeat"
                        },
                        _a)
                },
                isDataLoaded && {
                    opacity: '0',
                    position: 'absolute',
                    top: '0',
                    bottom: '0',
                    left: '0',
                    right: '0'
                }
            ],
            shimmerGradient: [
                classNames.shimmerGradient,
                {
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    background: (shimmerColor || semanticColors.disabledBackground) + "\n                      linear-gradient(\n                        to right,\n                        " + (shimmerColor || semanticColors.disabledBackground) + " 0%,\n                        " + (shimmerWaveColor || semanticColors.bodyDivider) + " 50%,\n                        " + (shimmerColor || semanticColors.disabledBackground) + " 100%)\n                      0 0 / 90% 100%\n                      no-repeat",
                    transform: "translateX(-" + BACKGROUND_OFF_SCREEN_POSITION + ")",
                    animationDuration: '2s',
                    animationTimingFunction: 'ease-in-out',
                    animationDirection: 'normal',
                    animationIterationCount: 'infinite',
                    animationName: isRTL ? shimmerAnimationRTL : shimmerAnimation
                }
            ],
            dataWrapper: [
                classNames.dataWrapper,
                {
                    position: 'absolute',
                    top: '0',
                    bottom: '0',
                    left: '0',
                    right: '0',
                    opacity: '0',
                    background: 'none',
                    backgroundColor: 'transparent',
                    border: 'none',
                    transition: "opacity " + transitionAnimationInterval + "ms"
                },
                isDataLoaded && {
                    opacity: '1',
                    position: 'static'
                }
            ],
            screenReaderText: Styling_1.hiddenContentStyle
        };
    }
    exports.getStyles = getStyles;
});
//# sourceMappingURL=Shimmer.styles.js.map