define(["require", "exports", "../../Styling", "../../Utilities"], function (require, exports, Styling_1, Utilities_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var GlobalClassNames = {
        root: 'ms-ProgressIndicator',
        itemName: 'ms-ProgressIndicator-itemName',
        itemDescription: 'ms-ProgressIndicator-itemDescription',
        itemProgress: 'ms-ProgressIndicator-itemProgress',
        progressTrack: 'ms-ProgressIndicator-progressTrack',
        progressBar: 'ms-ProgressIndicator-progressBar'
    };
    var IndeterminateProgress = Styling_1.keyframes({
        '0%': {
            left: '-30%'
        },
        '100%': {
            left: '100%'
        }
    });
    var IndeterminateProgressRTL = Styling_1.keyframes({
        '100%': {
            right: '-30%'
        },
        '0%': {
            right: '100%'
        }
    });
    exports.getStyles = function (props) {
        var _a, _b;
        var isRTL = Utilities_1.getRTL();
        var className = props.className, indeterminate = props.indeterminate, theme = props.theme, _c = props.barHeight, barHeight = _c === void 0 ? 2 : _c;
        var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;
        var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
        var marginBetweenText = 8;
        var textHeight = 18;
        var progressTrackColor = palette.neutralLight;
        return {
            root: [classNames.root, fonts.medium, className],
            itemName: [
                classNames.itemName,
                Styling_1.noWrap,
                {
                    color: semanticColors.bodyText,
                    paddingTop: marginBetweenText / 2,
                    lineHeight: textHeight + 2
                }
            ],
            itemDescription: [
                classNames.itemDescription,
                {
                    color: semanticColors.bodySubtext,
                    fontSize: fonts.small.fontSize,
                    lineHeight: textHeight
                }
            ],
            itemProgress: [
                classNames.itemProgress,
                {
                    position: 'relative',
                    overflow: 'hidden',
                    height: barHeight,
                    padding: marginBetweenText + "px 0"
                }
            ],
            progressTrack: [
                classNames.progressTrack,
                {
                    position: 'absolute',
                    width: '100%',
                    height: barHeight,
                    backgroundColor: progressTrackColor,
                    selectors: (_a = {},
                        _a[Styling_1.HighContrastSelector] = {
                            borderBottom: '1px solid WindowText'
                        },
                        _a)
                }
            ],
            progressBar: [
                {
                    backgroundColor: palette.themePrimary,
                    height: barHeight,
                    position: 'absolute',
                    transition: 'width .3s ease',
                    width: 0,
                    selectors: (_b = {},
                        _b[Styling_1.HighContrastSelector] = {
                            backgroundColor: 'WindowText'
                        },
                        _b)
                },
                indeterminate
                    ? {
                        position: 'absolute',
                        minWidth: '33%',
                        background: "linear-gradient(to right, " + progressTrackColor + " 0%, " + palette.themePrimary + " 50%, " + progressTrackColor + " 100%)",
                        animation: (isRTL ? IndeterminateProgressRTL : IndeterminateProgress) + " 3s infinite"
                    }
                    : {
                        transition: 'width .15s linear'
                    },
                classNames.progressBar
            ]
        };
    };
});
//# sourceMappingURL=ProgressIndicator.styles.js.map