"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var index_1 = require("../../utilities/styling/index");
var GlobalClassNames = {
    root: 'ms-Nav',
    linkText: 'ms-Nav-linkText',
    compositeLink: 'ms-Nav-compositeLink',
    link: 'ms-Nav-link',
    chevronButton: 'ms-Nav-chevronButton',
    chevronIcon: 'ms-Nav-chevron',
    navItem: 'ms-Nav-navItem',
    navItems: 'ms-Nav-navItems',
    group: 'ms-Nav-group',
    groupContent: 'ms-Nav-groupContent',
};
exports.buttonStyles = {
    textContainer: {
        overflow: 'hidden',
    },
    label: {
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        lineHeight: '36px'
    }
};
exports.getStyles = function (props) {
    var className = props.className, theme = props.theme, isOnTop = props.isOnTop, isExpanded = props.isExpanded, isGroup = props.isGroup, isLink = props.isLink, isSelected = props.isSelected, isButtonEntry = props.isButtonEntry, _a = props.navHeight, navHeight = _a === void 0 ? 36 : _a, position = props.position, _b = props.leftPadding, leftPadding = _b === void 0 ? 20 : _b, _c = props.leftPaddingExpanded, leftPaddingExpanded = _c === void 0 ? 28 : _c, _d = props.rightPadding, rightPadding = _d === void 0 ? 20 : _d;
    var palette = theme.palette, semanticColors = theme.semanticColors;
    var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
    return ({
        root: [
            classNames.root,
            className,
            {
                overflowY: 'auto',
                userSelect: 'none',
                WebkitOverflowScrolling: 'touch'
            },
            isOnTop && [
                {
                    position: 'absolute'
                },
                Styling_1.AnimationClassNames.slideRightIn40
            ]
        ],
        linkText: [
            classNames.linkText,
            {
                margin: '0 4px',
                overflow: 'hidden',
                verticalAlign: 'middle',
                textOverflow: 'ellipsis'
            }
        ],
        compositeLink: [
            classNames.compositeLink,
            {
                display: 'block',
                position: 'relative',
                color: semanticColors.bodyText
            },
            isExpanded && 'is-expanded',
            isSelected && 'is-selected'
        ],
        link: [
            classNames.link,
            Styling_1.getFocusStyle(theme),
            {
                display: 'block',
                position: 'relative',
                height: navHeight + "px",
                width: '100%',
                lineHeight: navHeight + "px",
                textDecoration: 'none',
                cursor: 'pointer',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                paddingLeft: leftPadding,
                paddingRight: rightPadding,
                selectors: (_e = {
                        '.ms-Nav-compositeLink:hover &': {
                            backgroundColor: semanticColors.bodyBackgroundHovered,
                            color: semanticColors.bodyText
                        }
                    },
                    _e[index_1.HighContrastSelector] = {
                        border: 0,
                        selectors: {
                            ':focus': {
                                border: '1px solid WindowText'
                            }
                        }
                    },
                    _e)
            },
            isSelected && {
                color: palette.themePrimary,
                backgroundColor: semanticColors.bodyBackgroundChecked,
                selectors: {
                    '&:after': {
                        borderLeft: "2px solid " + palette.themePrimary,
                        content: '""',
                        position: 'absolute',
                        top: 0,
                        right: 0,
                        bottom: 0,
                        left: 0
                    }
                }
            },
            isButtonEntry && {
                color: palette.themePrimary
            }
        ],
        chevronButton: [
            classNames.chevronButton,
            Styling_1.getFocusStyle(theme),
            {
                display: 'block',
                fontWeight: Styling_1.FontWeights.regular,
                fontSize: Styling_1.FontSizes.small,
                textAlign: 'left',
                lineHeight: navHeight + "px",
                margin: '5px 0',
                padding: "0px, " + rightPadding + "px, 0px, " + leftPaddingExpanded + "px",
                border: 'none',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                cursor: 'pointer',
                color: semanticColors.bodyText,
                backgroundColor: 'transparent',
                selectors: {
                    '&:visited': {
                        color: 'inherit'
                    },
                    '&:hover': {
                        color: semanticColors.bodyText,
                        backgroundColor: semanticColors.bodyBackgroundHovered
                    },
                    '$compositeLink:hover &': {
                        color: semanticColors.bodyText,
                        backgroundColor: semanticColors.bodyBackgroundHovered
                    },
                }
            },
            isGroup && [
                {
                    width: '100%',
                    height: navHeight + "px",
                    borderBottom: "1px solid " + semanticColors.bodyDivider
                },
                Styling_1.DefaultFontStyles.large
            ],
            isLink && [
                {
                    display: 'block',
                    width: leftPaddingExpanded - 2 + "px",
                    height: navHeight - 2 + "px",
                    position: 'absolute',
                    top: '1px',
                    left: position + "px",
                    zIndex: Styling_1.ZIndexes.Nav,
                    padding: 0,
                    margin: 0
                }
            ],
            isSelected && {
                color: palette.themePrimary,
                backgroundColor: palette.neutralLighterAlt,
                selectors: {
                    '&:after': {
                        borderLeft: "2px solid " + palette.themePrimary,
                        content: '""',
                        position: 'absolute',
                        top: 0,
                        right: 0,
                        bottom: 0,
                        left: 0
                    }
                }
            }
        ],
        chevronIcon: [
            classNames.chevronIcon,
            {
                position: 'absolute',
                left: '8px',
                height: navHeight + "px",
                lineHeight: navHeight + "px",
                fontSize: '12px',
                transition: 'transform .1s linear',
            },
            isExpanded && {
                transform: 'rotate(-180deg)'
            },
            isLink && {
                top: 0
            }
        ],
        navItem: [
            classNames.navItem,
            {
                padding: 0
            }
        ],
        navItems: [
            classNames.navItems,
            {
                listStyleType: 'none',
                padding: 0
            }
        ],
        group: [
            classNames.group,
            isExpanded && 'is-expanded'
        ],
        groupContent: [
            classNames.groupContent,
            {
                display: 'none',
                marginBottom: '40px'
            },
            Styling_1.AnimationClassNames.slideDownIn20,
            isExpanded && {
                display: 'block'
            }
        ]
    });
    var _e;
};
//# sourceMappingURL=Nav.styles.js.map