import styled, { css } from 'styled-components';
import { Card } from '../Card/Card';
import { StyledItem } from '../MenuImperative/MenuImperative.styles';
import { getTypographyIntent } from '../Typography/Typography.styles';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
var hiddenTab = /*#__PURE__*/css(["pointer-events:none;position:absolute;visibility:hidden;"]);
var visible = /*#__PURE__*/css(["pointer-events:all;position:relative;visibility:visible;"]);
var borderRadius = /*#__PURE__*/css(["border-radius:", "px ", "px 0 0;"], spacing.xs, spacing.xs);

//// START BASE LAYOUT COMPONENTS FOR TABS ////

/**
 * Elements to handle general layout and browser resets.
 * Will be the referencable element (class) other selectors
 * that need to target general layout references.
 */
var StyledTabBase = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTabBase",
  componentId: "core-12_10_0__sc-17s58xs-0"
})(["align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;position:relative;white-space:nowrap;text-decoration:none;background-color:transparent;border:none;font-family:inherit;padding:0;"]);
var StyledTabInnerBase = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTabInnerBase",
  componentId: "core-12_10_0__sc-17s58xs-1"
})(["align-self:baseline;box-sizing:border-box;&,> a{display:flex;text-decoration:none;width:100%;}"]);

// This so that it can be visible/hidden via CSS down below
var StyledDropdownTabBase = /*#__PURE__*/styled(StyledTabBase).withConfig({
  displayName: "StyledDropdownTabBase",
  componentId: "core-12_10_0__sc-17s58xs-2"
})(["", ""], hiddenTab);

//// END BASE LAYOUT COMPONENTS FOR TABS ////

//// START TRADITIONAL DESIGN SYSTEM TAB STYLES ////

/**
 * Styles specific to the Design System general cases (not Global nav)
 */
function getTabStyle() {
  return css(["", " height:26px;& + ", "{margin-left:", "px;}a&{", "}&,a&,button&{", "}&:focus,&:focus-within,&:hover{background:", ";}&:focus,&:focus-within{box-shadow:inset 0 0 0 2px ", ";outline:none;a{outline:none;}}"], borderRadius, StyledTabBase, spacing.xl, borderRadius, function (_ref) {
    var $active = _ref.$active;
    if ($active) {
      return css(["border-bottom:3px solid ", ";"], colors.gray15);
    }
  }, function (_ref2) {
    var $dark = _ref2.$dark;
    return $dark ? 'transparent' : colors.gray90;
  }, colors.blue40);
}
var StyledTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
  displayName: "StyledTab",
  componentId: "core-12_10_0__sc-17s58xs-3"
})(["", ""], getTabStyle);
var StyledTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
  displayName: "StyledTabInner",
  componentId: "core-12_10_0__sc-17s58xs-4"
})(["", " padding:0 ", "px;font-weight:", ";&,> a{", " color:", ";height:23px;}", ""], getTypographyIntent('body'), spacing.xs, function (_ref3) {
  var $active = _ref3.$active;
  return $active ? 600 : 400;
}, borderRadius, colors.gray15, function (_ref4) {
  var $active = _ref4.$active,
    $dark = _ref4.$dark;
  if ($dark) {
    return css(["&,> a,button&,a&{color:", ";&:hover{color:white;}}"], $active ? colors.white : colors.gray70);
  }
});
var StyledDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
  displayName: "StyledDropdownTab",
  componentId: "core-12_10_0__sc-17s58xs-5"
})(["", ""], getTabStyle);
var StyledDropdownTabInner = /*#__PURE__*/styled(StyledTabInner).withConfig({
  displayName: "StyledDropdownTabInner",
  componentId: "core-12_10_0__sc-17s58xs-6"
})(["align-items:center;cursor:pointer;display:inline-flex;"]);
var StyledLink = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledLink",
  componentId: "core-12_10_0__sc-17s58xs-7"
})(["align-items:center;display:flex;height:23px;", " box-sizing:border-box;"], borderRadius);

//// END TRADITIONAL DESIGN SYSTEM TAB STYLES ////

//// START HELIX GLOBAL NAVIGATION TAB STYLES ////

function getHelixHeaderTabStyles() {
  return css(["border-radius:4px;color:", ";height:24px;overflow:hidden;padding:", "px;text-align:center;", ";font-weight:600;& + ", "{margin-left:", "px;}&:hover{background:rgba(117,131,138,0.3);color:", ";text-decoration:none;}&:focus{outline:2px solid ", ";outline-offset:-2px;background:rgba(117,131,138,0.3);}", ""], colors.white, spacing.xs, getTypographyIntent('small'), StyledTabBase, spacing.sm, colors.white, colors.blue70, function (_ref5) {
    var $active = _ref5.$active;
    if ($active) {
      return css(["background:", ";"], colors.gray30);
    }
  });
}
var StyledGlobalNavigationTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
  displayName: "StyledGlobalNavigationTab",
  componentId: "core-12_10_0__sc-17s58xs-8"
})(["", ""], getHelixHeaderTabStyles);
var StyledGlobalNavigationDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
  displayName: "StyledGlobalNavigationDropdownTab",
  componentId: "core-12_10_0__sc-17s58xs-9"
})(["", ""], getHelixHeaderTabStyles);
var StyledGlobalNavigationDropdownTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
  displayName: "StyledGlobalNavigationDropdownTabInner",
  componentId: "core-12_10_0__sc-17s58xs-10"
})(["align-items:center;cursor:pointer;display:inline-flex;"]);
var StyledGlobalNavigationLink = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledGlobalNavigationLink",
  componentId: "core-12_10_0__sc-17s58xs-11"
})(["padding-left:6px;padding-right:6px;"]);

//// END HELIX GLOBAL NAVIGATION TAB STYLES ////

export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
  displayName: "StyledOverlay",
  componentId: "core-12_10_0__sc-17s58xs-12"
})(["max-height:40vh;", "{padding:0;display:flex;justify-content:center;a{margin:unset;padding:unset;}}", "{padding:0;display:flex;}", "{padding:2px 16px 4px 16px;}", ",", "{color:", ";border-radius:0;display:flex;width:100%;background:inherit;font-weight:inherit;font-size:inherit;padding:0;}[data-selected='true']{", ",", "{border-bottom-color:transparent;color:", ";}}"], StyledItem, StyledLink, StyledTabInnerBase, StyledLink, StyledTabBase, colors.gray15, StyledLink, StyledTabBase, colors.blue50);
export var StyledTabList = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTabList",
  componentId: "core-12_10_0__sc-17s58xs-13"
})(["display:flex;width:100%;"]);
export var StyledTabs = /*#__PURE__*/styled.nav.withConfig({
  displayName: "StyledTabs",
  componentId: "core-12_10_0__sc-17s58xs-14"
})(["background-color:", ";display:flex;overflow:hidden;width:100%;", "{&:nth-child(1n + ", "){&:not(", "){", "}}}", ""], function (_ref6) {
  var dark = _ref6.dark;
  return dark && colors.gray15;
}, StyledTabBase, function (_ref7) {
  var index = _ref7.index;
  return index;
}, StyledDropdownTabBase, hiddenTab, function (_ref8) {
  var _ref8$index = _ref8.index,
    index = _ref8$index === void 0 ? -1 : _ref8$index;
  return index >= 0 && css(["", "{", "}"], StyledDropdownTabBase, visible);
});

/**
 * Switches between different Tab styles of traditional and helix header navigation.
 * Allows separate style CSS without conditionals across all the components.
 * @returns Subcomponents to render
 */
export function getStyledComponents() {
  var helixHeader = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  if (helixHeader) {
    return {
      Tab: StyledGlobalNavigationTab,
      TabInner: StyledTabInnerBase,
      Link: StyledGlobalNavigationLink,
      DropdownTab: StyledGlobalNavigationDropdownTab,
      DropdownTabInner: StyledGlobalNavigationDropdownTabInner
    };
  }
  return {
    Tab: StyledTab,
    TabInner: StyledTabInner,
    Link: StyledLink,
    DropdownTab: StyledDropdownTab,
    DropdownTabInner: StyledDropdownTabInner
  };
}
//# sourceMappingURL=Tabs.styles.js.map