"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var globalClassNames = {
    count: 'ms-Pivot-count',
    icon: 'ms-Pivot-icon',
    linkIsSelected: 'is-selected',
    link: 'ms-Pivot-link',
    linkContent: 'ms-Pivot-linkContent',
    root: 'ms-Pivot',
    rootIsLarge: 'ms-Pivot--large',
    rootIsTabs: 'ms-Pivot--tabs',
    text: 'ms-Pivot-text'
};
var linkStyles = function (props) {
    var rootIsLarge = props.rootIsLarge, rootIsTabs = props.rootIsTabs, theme = props.theme;
    var palette = props.theme.palette;
    return [
        {
            color: palette.neutralPrimary,
            display: 'inline-block',
            fontSize: Styling_1.FontSizes.medium,
            fontWeight: Styling_1.FontWeights.regular,
            lineHeight: '40px',
            marginRight: '8px',
            padding: '0 8px',
            textAlign: 'center',
            position: 'relative',
            backgroundColor: 'transparent',
            border: 0,
            selectors: {
                ':before': {
                    backgroundColor: 'transparent',
                    bottom: 0,
                    content: '""',
                    height: '2px',
                    left: '8px',
                    position: 'absolute',
                    right: '8px',
                    transition: "background-color " + Styling_1.AnimationVariables.durationValue2 + " " + Styling_1.AnimationVariables.easeFunction2
                },
                ':after': {
                    color: 'transparent',
                    content: 'attr(title)',
                    display: 'block',
                    fontWeight: Styling_1.FontWeights.bold,
                    height: '1px',
                    overflow: 'hidden',
                    visibility: 'hidden'
                },
                ':hover': {
                    color: palette.neutralPrimary,
                    cursor: 'pointer'
                },
                ':focus': {
                    outline: 'none'
                },
                '.ms-Fabric--isFocusVisible &:focus': {
                    outline: "1px solid " + palette.neutralSecondaryAlt
                }
            }
        },
        rootIsLarge && {
            fontSize: Styling_1.FontSizes.large
        },
        rootIsTabs && [
            Styling_1.getFocusStyle(theme),
            {
                marginRight: 0,
                height: '40px',
                lineHeight: '40px',
                backgroundColor: palette.neutralLighter,
                padding: '0 10px',
                verticalAlign: 'top',
                selectors: {
                    ':focus': {
                        outlineOffset: '-1px'
                    },
                    '.ms-Fabric--isFocusVisible &:focus::before': {
                        height: 'auto',
                        background: 'transparent',
                        transition: 'none'
                    }
                }
            }
        ]
    ];
};
exports.getStyles = function (props) {
    var className = props.className, rootIsLarge = props.rootIsLarge, rootIsTabs = props.rootIsTabs, theme = props.theme;
    var palette = theme.palette;
    var classNames = Styling_1.getGlobalClassNames(globalClassNames, theme);
    return {
        root: [
            classNames.root,
            Styling_1.normalize,
            {
                fontSize: Styling_1.FontSizes.medium,
                fontWeight: Styling_1.FontWeights.regular,
                position: 'relative',
                color: palette.themePrimary,
                whiteSpace: 'nowrap'
            },
            rootIsLarge && classNames.rootIsLarge,
            rootIsTabs && classNames.rootIsTabs,
            className
        ],
        link: [
            classNames.link
        ].concat(linkStyles(props), [
            {
                selectors: {
                    ':hover::before': {
                        boxSizing: 'border-box',
                        borderBottom: '2px solid transparent'
                    }
                }
            },
            rootIsTabs && {
                selectors: {
                    '&:hover, &:focus': {
                        color: palette.black
                    },
                    ':active': {
                        backgroundColor: palette.themePrimary
                    }
                }
            }
        ]),
        linkIsSelected: [
            classNames.link,
            classNames.linkIsSelected
        ].concat(linkStyles(props), [
            {
                fontWeight: Styling_1.FontWeights.semibold,
                selectors: (_a = {
                        ':before': {
                            boxSizing: 'border-box',
                            borderBottom: "2px solid " + palette.themePrimary,
                            selectors: (_b = {},
                                _b[Styling_1.HighContrastSelector] = {
                                    borderBottomColor: 'Highlight'
                                },
                                _b)
                        }
                    },
                    _a[Styling_1.HighContrastSelector] = {
                        color: 'Highlight'
                    },
                    _a)
            },
            rootIsTabs && {
                backgroundColor: palette.themePrimary,
                color: palette.white,
                fontWeight: Styling_1.FontWeights.semilight,
                selectors: (_c = {
                        ':before': {
                            backgroundColor: 'transparent',
                            transition: 'none',
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            content: '""',
                            height: 'auto'
                        },
                        '&:active, &:hover': {
                            color: palette.white
                        }
                    },
                    _c[Styling_1.HighContrastSelector] = {
                        fontWeight: Styling_1.FontWeights.semibold,
                        color: 'HighlightText',
                        background: 'Highlight',
                        MsHighContrastAdjust: 'none'
                    },
                    _c)
            }
        ]),
        linkContent: [classNames.linkContent],
        text: [
            classNames.text,
            {
                display: 'inline-block',
                verticalAlign: 'top'
            }
        ],
        count: [
            classNames.count,
            {
                marginLeft: '4px',
                display: 'inline-block',
                verticalAlign: 'top'
            }
        ],
        icon: [
            classNames.icon,
            {
                selectors: {
                    '& + $text': {
                        marginLeft: '4px'
                    }
                }
            }
        ]
    };
    var _a, _b, _c;
};
//# sourceMappingURL=Pivot.styles.js.map