text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var Styling_1 = require("../../Styling");
  var Utilities_1 = require("../../Utilities");
  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;
      var _a = props.theme, palette = _a.palette, semanticColors = _a.semanticColors;
      return [
          {
              color: semanticColors.actionLink,
              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: (_b = {
                      ':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(data-content)',
                          display: 'block',
                          fontWeight: Styling_1.FontWeights.bold,
                          height: '1px',
                          overflow: 'hidden',
                          visibility: 'hidden'
                      },
                      ':hover': {
                          color: semanticColors.actionLinkHovered,
                          cursor: 'pointer'
                      },
                      ':focus': {
                          outline: 'none'
                      }
                  },
                  _b["." + Utilities_1.IsFocusVisibleClassName + " &:focus"] = {
                      outline: "1px solid " + semanticColors.focusBorder
                  },
                  _b["." + Utilities_1.IsFocusVisibleClassName + " &:focus:after"] = {
                      content: 'attr(data-content)',
                      position: 'relative',
                      border: 0
                  },
                  _b)
          },
          rootIsLarge && {
              fontSize: Styling_1.FontSizes.large
          },
          rootIsTabs && [
              {
                  marginRight: 0,
                  height: '40px',
                  lineHeight: '40px',
                  backgroundColor: palette.neutralLighter,
                  padding: '0 10px',
                  verticalAlign: 'top',
                  selectors: (_c = {
                          ':focus': {
                              outlineOffset: '-1px'
                          }
                      },
                      _c["." + Utilities_1.IsFocusVisibleClassName + " &:focus::before"] = {
                          height: 'auto',
                          background: 'transparent',
                          transition: 'none'
                      },
                      _c)
              }
          ]
      ];
      var _b, _c;
  };
  exports.getStyles = function (props) {
      var className = props.className, rootIsLarge = props.rootIsLarge, rootIsTabs = props.rootIsTabs, theme = props.theme;
      var palette = theme.palette, semanticColors = theme.semanticColors;
      var classNames = Styling_1.getGlobalClassNames(globalClassNames, theme);
      return {
          root: [
              classNames.root,
              theme.fonts.medium,
              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 " + semanticColors.inputBackgroundChecked,
                              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