import styled, { css } from 'styled-components';
import { Card } from '../Card/Card';
import { getUnstyledButton } from '../Semantic/Semantic.styles';
import { getTypographyIntent, typographyWeights } from '../Typography/Typography.styles';
import { colors } from '../_styles/colors';
import { focusable } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
var tabGap = spacing.md;
var hiddenTab = /*#__PURE__*/css(["pointer-events:none;position:absolute;visibility:hidden;"]);
var visible = /*#__PURE__*/css(["pointer-events:all;position:relative;visibility:visible;"]);
export var StyledLink = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledLink",
  componentId: "core-11_23_1__sc-17s58xs-0"
})(["align-items:center;border-bottom-style:solid;border-bottom-color:transparent;border-bottom-width:2px;display:inline-flex;height:26px;justify-content:center;"]);
export var StyledTab = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTab",
  componentId: "core-11_23_1__sc-17s58xs-1"
})(["align-items:center;cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;padding:0 ", "px;position:relative;white-space:nowrap;a&{text-decoration:none;}button&{background-color:transparent;border:none;font-family:inherit;}&:first-child{padding-left:0;}&:last-child{padding-right:0;}&:not(:last-child){&:focus{outline:none;", "{box-shadow:inset 0 0 0 1px ", ";}}}"], tabGap, StyledLink, colors.blue40);
export var StyledTabInner = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTabInner",
  componentId: "core-11_23_1__sc-17s58xs-2"
})(["", " > a{text-decoration:none;", "}", ""], getTypographyIntent('body'), focusable, function (_ref) {
  var active = _ref.active,
    dark = _ref.dark;
  var textColors = dark ? {
    active: colors.white,
    "default": colors.gray70,
    hover: colors.white
  } : {
    active: colors.gray15,
    "default": colors.gray45,
    hover: colors.gray15
  };
  if (active) {
    return css(["&,> a{color:", ";cursor:default;}", "{border-bottom-color:", ";}"], textColors.active, StyledLink, colors.blue50);
  }
  return css(["&,> a{color:", ";cursor:pointer;}&:hover,&.hover,> a:hover{color:", ";}"], textColors["default"], textColors.hover);
});
export var StyledDropdownTab = /*#__PURE__*/styled(StyledTab).withConfig({
  displayName: "StyledDropdownTab",
  componentId: "core-11_23_1__sc-17s58xs-3"
})(["cursor:pointer;", " ", " ", " margin-left:", "px;", "{margin-right:", "px;}"], getUnstyledButton, focusable, hiddenTab, tabGap, StyledLink, spacing.xs);
export var StyledDropdownTabInner = /*#__PURE__*/styled(StyledTabInner).withConfig({
  displayName: "StyledDropdownTabInner",
  componentId: "core-11_23_1__sc-17s58xs-4"
})(["align-items:center;cursor:pointer;display:inline-flex;"]);
export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
  displayName: "StyledOverlay",
  componentId: "core-11_23_1__sc-17s58xs-5"
})(["max-height:40vh;", "{color:", ";}", "{margin:-", "px -", "px;padding:", "px ", "px;}[data-selected='true']{", ",", " > a{color:", ";font-weight:", ";}}", "{border:0;height:auto;}"], StyledTabInner, colors.gray45, StyledTab, spacing.sm, spacing.lg, spacing.sm, spacing.lg, StyledTabInner, StyledTabInner, colors.blue50, typographyWeights.semibold, StyledLink);
export var StyledTabList = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTabList",
  componentId: "core-11_23_1__sc-17s58xs-6"
})(["display:flex;width:100%;"]);
export var StyledTabs = /*#__PURE__*/styled.nav.withConfig({
  displayName: "StyledTabs",
  componentId: "core-11_23_1__sc-17s58xs-7"
})(["background-color:", ";display:flex;overflow:hidden;width:100%;", "{&:nth-child(1n + ", "){&:not(", "){", "}}}", ""], function (_ref2) {
  var dark = _ref2.dark;
  return dark && colors.gray15;
}, StyledTab, function (_ref3) {
  var index = _ref3.index;
  return index;
}, StyledDropdownTab, hiddenTab, function (_ref4) {
  var _ref4$index = _ref4.index,
    index = _ref4$index === void 0 ? -1 : _ref4$index;
  return index >= 0 && css(["", "{", "}"], StyledDropdownTab, visible);
});
//# sourceMappingURL=Tabs.styles.js.map