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);
export var StyledLink = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledLink",
  componentId: "core-12_4_1__sc-17s58xs-0"
})(["align-items:center;display:flex;height:23px;", " box-sizing:border-box;"], borderRadius);
export var StyledTab = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTab",
  componentId: "core-12_4_1__sc-17s58xs-1"
})(["", " align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;flex:0 0 auto;height:26px;justify-content:center;position:relative;white-space:nowrap;a&{", " text-decoration:none;}button&{background-color:transparent;border:none;font-family:inherit;padding-inline-start:0;padding-inline-end:0;padding-block-start:0;padding-block-end:0;}&,a&,button&{", "}&:focus,&:focus-within,&:hover{background:", ";}&:focus,&:focus-within{box-shadow:inset 0 0 0 2px ", ";outline:none;a{outline:none;}}"], borderRadius, 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);
export var StyledTabInner = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTabInner",
  componentId: "core-12_4_1__sc-17s58xs-2"
})(["", " align-self:baseline;padding:0 ", "px;box-sizing:border-box;font-weight:", ";&,> a{", " color:", ";display:flex;height:23px;text-decoration:none;width:100%;}", ""], 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);
  }
});

// This is still needed so that it can be hidden via CSS down below
export var StyledDropdownTab = /*#__PURE__*/styled(StyledTab).withConfig({
  displayName: "StyledDropdownTab",
  componentId: "core-12_4_1__sc-17s58xs-3"
})(["", ""], hiddenTab);
export var StyledDropdownTabInner = /*#__PURE__*/styled(StyledTabInner).withConfig({
  displayName: "StyledDropdownTabInner",
  componentId: "core-12_4_1__sc-17s58xs-4"
})(["align-items:center;cursor:pointer;display:inline-flex;"]);
export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
  displayName: "StyledOverlay",
  componentId: "core-12_4_1__sc-17s58xs-5"
})(["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%;}[data-selected='true']{", ",", "{border-bottom-color:transparent;color:", ";}}"], StyledItem, StyledLink, StyledTabInner, StyledLink, StyledTab, colors.gray15, StyledLink, StyledTab, colors.blue50);
export var StyledTabList = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTabList",
  componentId: "core-12_4_1__sc-17s58xs-6"
})(["display:flex;width:100%;"]);
export var StyledTabs = /*#__PURE__*/styled.nav.withConfig({
  displayName: "StyledTabs",
  componentId: "core-12_4_1__sc-17s58xs-7"
})(["background-color:", ";display:flex;overflow:hidden;width:100%;", " + ", "{margin-left:", "px;}", "{&:nth-child(1n + ", "){&:not(", "){", "}}}", ""], function (_ref5) {
  var dark = _ref5.dark;
  return dark && colors.gray15;
}, StyledTab, StyledTab, spacing.xl, StyledTab, function (_ref6) {
  var index = _ref6.index;
  return index;
}, StyledDropdownTab, hiddenTab, function (_ref7) {
  var _ref7$index = _ref7.index,
    index = _ref7$index === void 0 ? -1 : _ref7$index;
  return index >= 0 && css(["", "{", "}"], StyledDropdownTab, visible);
});
//# sourceMappingURL=Tabs.styles.js.map