import { getGlobalClassNames, HighContrastSelectorWhite, HighContrastSelectorBlack, HighContrastSelector } from '../../Styling';
var GlobalClassNames = {
    root: 'ms-Link'
};
export var getStyles = function (props) {
    var _a, _b, _c;
    var className = props.className, isButton = props.isButton, isDisabled = props.isDisabled, theme = props.theme;
    var semanticColors = theme.semanticColors;
    // Tokens
    var linkColor = semanticColors.link;
    var linkInteractedColor = semanticColors.linkHovered;
    var linkDisabledColor = semanticColors.disabledText;
    var focusBorderColor = semanticColors.focusBorder;
    var classNames = getGlobalClassNames(GlobalClassNames, theme);
    return {
        root: [
            classNames.root,
            theme.fonts.medium,
            {
                color: linkColor,
                outline: 'none',
                fontSize: 'inherit',
                fontWeight: 'inherit',
                selectors: (_a = {
                        '.ms-Fabric--isFocusVisible &:focus': {
                            // Can't use getFocusStyle because it doesn't support wrapping links
                            // https://github.com/OfficeDev/office-ui-fabric-react/issues/4883#issuecomment-406743543
                            // A box-shadow allows the focus rect to wrap links that span multiple lines
                            // and helps the focus rect avoid getting clipped.
                            boxShadow: "0 0 0 1px " + focusBorderColor + " inset",
                            selectors: (_b = {},
                                _b[HighContrastSelector] = {
                                    outline: '1px solid WindowText'
                                },
                                _b)
                        }
                    },
                    _a[HighContrastSelector] = {
                        // For IE high contrast mode
                        borderBottom: 'none'
                    },
                    _a)
            },
            isButton && {
                background: 'none',
                backgroundColor: 'transparent',
                border: 'none',
                cursor: 'pointer',
                display: 'inline',
                margin: 0,
                overflow: 'inherit',
                padding: 0,
                textAlign: 'left',
                textOverflow: 'inherit',
                userSelect: 'text',
                borderBottom: '1px solid transparent',
                selectors: (_c = {},
                    _c[HighContrastSelectorBlack] = {
                        color: '#FFFF00'
                    },
                    _c[HighContrastSelectorWhite] = {
                        color: '#00009F'
                    },
                    _c)
            },
            !isButton && {
                textDecoration: 'none'
            },
            isDisabled && [
                'is-disabled',
                {
                    color: linkDisabledColor,
                    cursor: 'default'
                },
                {
                    selectors: {
                        '&:link, &:visited': {
                            pointerEvents: 'none'
                        }
                    }
                }
            ],
            !isDisabled && {
                selectors: {
                    '&:active, &:hover, &:active:hover': {
                        color: linkInteractedColor,
                        textDecoration: 'underline'
                    },
                    '&:focus': {
                        color: linkColor
                    }
                }
            },
            classNames.root,
            className
        ]
    };
};
//# sourceMappingURL=Link.styles.js.map