"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.baseStyles = undefined;

var _css2 = require("@emotion/css");

var _css3 = _interopRequireDefault(_css2);

var _core = require("@emotion/core");

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _gatsby = require("gatsby");

var _presets = require("../../utils/presets");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var baseStyles = exports.baseStyles = _defineProperty({
  alignItems: "center",
  borderRadius: "".concat(_presets.radius["default"], " ").concat(_presets.radius["default"], " 0 0"),
  color: _presets.colors.purple[50],
  display: "inline-flex",
  fontFamily: _presets.fontFamilies.headerFontFamily,
  fontSize: _presets.fontSizes.m,
  fontWeight: "bold",
  height: "3.5rem",
  margin: "0 ".concat(_presets.spaces["2xs"]),
  padding: "".concat(_presets.spaces["3xs"], " ").concat(_presets.spaces.m, " 0"),
  position: "relative",
  zIndex: "0",
  a: {
    alignItems: "center",
    display: "flex",
    textDecoration: "none",
    "&:active": {
      color: "inherit"
    }
  },
  "&.active": {
    zIndex: "2",
    ":before, :after": {
      border: "1px solid ".concat(_presets.colors.standardLine),
      bottom: "-1px",
      content: "\"\"",
      height: "6px",
      position: "absolute",
      width: "6px"
    },
    ":before": {
      borderBottomRightRadius: "6px",
      borderWidth: "0 1px 1px 0",
      boxShadow: "2px 2px 0 #fff",
      left: "-6px"
    },
    ":after": {
      borderBottomLeftRadius: "6px",
      borderWidth: "0 0 1px 1px",
      boxShadow: "-2px 2px 0 #fff",
      right: "-6px"
    }
  }
}, "@media (min-width: ".concat(_presets.breakpoints.phablet, "px)"), {
  padding: "".concat(_presets.spaces["3xs"], " ").concat(_presets.spaces.l, " 0")
});

var Tab = function Tab(_ref) {
  var className = _ref.className,
      to = _ref.to,
      onClick = _ref.onClick,
      children = _ref.children,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? "DEFAULT" : _ref$variant;
  var tabStyles = {
    DEFAULT: {
      border: "1px solid ".concat(_presets.colors.standardLine),
      color: _presets.colors.purple[50],
      "&.active": {
        background: _presets.colors.secondaryBackground,
        borderBottomColor: _presets.colors.secondaryBackground,
        color: _presets.colors.grey[90]
      }
    },
    NUMBERED: {
      background: _presets.colors.secondaryBackground,
      border: "1px solid ".concat(_presets.colors.standardLine),
      color: _presets.colors.grey[40],
      a: {
        color: _presets.colors.purple[40],
        textDecoration: "none",
        alignItems: "center",
        display: "flex"
      },
      "&.active": {
        background: _presets.colors.primaryBackground,
        borderBottomColor: _presets.colors.secondaryBackground,
        color: _presets.colors.grey[90],
        zIndex: "2"
      }
    }
  };
  return (0, _core.jsx)("li", {
    className: className,
    css:
    /*#__PURE__*/
    (0, _css3["default"])(_objectSpread({}, baseStyles, {}, tabStyles[variant]), "label:Tab;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RhYnMvVGFiLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStGTSIsImZpbGUiOiIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9UYWJzL1RhYi5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHsganN4IH0gZnJvbSBcIkBlbW90aW9uL2NvcmVcIlxuaW1wb3J0IFByb3BUeXBlcyBmcm9tIFwicHJvcC10eXBlc1wiXG5pbXBvcnQgeyBMaW5rIH0gZnJvbSBcImdhdHNieVwiXG5cbmltcG9ydCB7XG4gIGNvbG9ycyxcbiAgcmFkaXVzLFxuICBzcGFjZXMsXG4gIGJyZWFrcG9pbnRzLFxuICBmb250RmFtaWxpZXMsXG4gIGZvbnRTaXplcyxcbn0gZnJvbSBcIi4uLy4uL3V0aWxzL3ByZXNldHNcIlxuXG5leHBvcnQgY29uc3QgYmFzZVN0eWxlcyA9IHtcbiAgYWxpZ25JdGVtczogYGNlbnRlcmAsXG4gIGJvcmRlclJhZGl1czogYCR7cmFkaXVzLmRlZmF1bHR9ICR7cmFkaXVzLmRlZmF1bHR9IDAgMGAsXG4gIGNvbG9yOiBjb2xvcnMucHVycGxlWzUwXSxcbiAgZGlzcGxheTogYGlubGluZS1mbGV4YCxcbiAgZm9udEZhbWlseTogZm9udEZhbWlsaWVzLmhlYWRlckZvbnRGYW1pbHksXG4gIGZvbnRTaXplOiBmb250U2l6ZXMubSxcbiAgZm9udFdlaWdodDogYGJvbGRgLFxuICBoZWlnaHQ6IGAzLjVyZW1gLFxuICBtYXJnaW46IGAwICR7c3BhY2VzW2AyeHNgXX1gLFxuICBwYWRkaW5nOiBgJHtzcGFjZXNbYDN4c2BdfSAke3NwYWNlcy5tfSAwYCxcbiAgcG9zaXRpb246IGByZWxhdGl2ZWAsXG4gIHpJbmRleDogYDBgLFxuICBhOiB7XG4gICAgYWxpZ25JdGVtczogYGNlbnRlcmAsXG4gICAgZGlzcGxheTogYGZsZXhgLFxuICAgIHRleHREZWNvcmF0aW9uOiBgbm9uZWAsXG4gICAgXCImOmFjdGl2ZVwiOiB7XG4gICAgICBjb2xvcjogYGluaGVyaXRgLFxuICAgIH0sXG4gIH0sXG4gIFwiJi5hY3RpdmVcIjoge1xuICAgIHpJbmRleDogYDJgLFxuICAgIFwiOmJlZm9yZSwgOmFmdGVyXCI6IHtcbiAgICAgIGJvcmRlcjogYDFweCBzb2xpZCAke2NvbG9ycy5zdGFuZGFyZExpbmV9YCxcbiAgICAgIGJvdHRvbTogYC0xcHhgLFxuICAgICAgY29udGVudDogYFwiXCJgLFxuICAgICAgaGVpZ2h0OiBgNnB4YCxcbiAgICAgIHBvc2l0aW9uOiBgYWJzb2x1dGVgLFxuICAgICAgd2lkdGg6IGA2cHhgLFxuICAgIH0sXG4gICAgXCI6YmVmb3JlXCI6IHtcbiAgICAgIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiBgNnB4YCxcbiAgICAgIGJvcmRlcldpZHRoOiBgMCAxcHggMXB4IDBgLFxuICAgICAgYm94U2hhZG93OiBgMnB4IDJweCAwICNmZmZgLFxuICAgICAgbGVmdDogYC02cHhgLFxuICAgIH0sXG4gICAgXCI6YWZ0ZXJcIjoge1xuICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogYDZweGAsXG4gICAgICBib3JkZXJXaWR0aDogYDAgMCAxcHggMXB4YCxcbiAgICAgIGJveFNoYWRvdzogYC0ycHggMnB4IDAgI2ZmZmAsXG4gICAgICByaWdodDogYC02cHhgLFxuICAgIH0sXG4gIH0sXG4gIFtgQG1lZGlhIChtaW4td2lkdGg6ICR7YnJlYWtwb2ludHMucGhhYmxldH1weClgXToge1xuICAgIHBhZGRpbmc6IGAke3NwYWNlc1tgM3hzYF19ICR7c3BhY2VzLmx9IDBgLFxuICB9LFxufVxuXG5jb25zdCBUYWIgPSAoeyBjbGFzc05hbWUsIHRvLCBvbkNsaWNrLCBjaGlsZHJlbiwgdmFyaWFudCA9IGBERUZBVUxUYCB9KSA9PiB7XG4gIGNvbnN0IHRhYlN0eWxlcyA9IHtcbiAgICBERUZBVUxUOiB7XG4gICAgICBib3JkZXI6IGAxcHggc29saWQgJHtjb2xvcnMuc3RhbmRhcmRMaW5lfWAsXG4gICAgICBjb2xvcjogY29sb3JzLnB1cnBsZVs1MF0sXG4gICAgICBcIiYuYWN0aXZlXCI6IHtcbiAgICAgICAgYmFja2dyb3VuZDogY29sb3JzLnNlY29uZGFyeUJhY2tncm91bmQsXG4gICAgICAgIGJvcmRlckJvdHRvbUNvbG9yOiBjb2xvcnMuc2Vjb25kYXJ5QmFja2dyb3VuZCxcbiAgICAgICAgY29sb3I6IGNvbG9ycy5ncmV5WzkwXSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBOVU1CRVJFRDoge1xuICAgICAgYmFja2dyb3VuZDogY29sb3JzLnNlY29uZGFyeUJhY2tncm91bmQsXG4gICAgICBib3JkZXI6IGAxcHggc29saWQgJHtjb2xvcnMuc3RhbmRhcmRMaW5lfWAsXG4gICAgICBjb2xvcjogY29sb3JzLmdyZXlbNDBdLFxuICAgICAgYToge1xuICAgICAgICBjb2xvcjogY29sb3JzLnB1cnBsZVs0MF0sXG4gICAgICAgIHRleHREZWNvcmF0aW9uOiBgbm9uZWAsXG4gICAgICAgIGFsaWduSXRlbXM6IGBjZW50ZXJgLFxuICAgICAgICBkaXNwbGF5OiBgZmxleGAsXG4gICAgICB9LFxuICAgICAgXCImLmFjdGl2ZVwiOiB7XG4gICAgICAgIGJhY2tncm91bmQ6IGNvbG9ycy5wcmltYXJ5QmFja2dyb3VuZCxcbiAgICAgICAgYm9yZGVyQm90dG9tQ29sb3I6IGNvbG9ycy5zZWNvbmRhcnlCYWNrZ3JvdW5kLFxuICAgICAgICBjb2xvcjogY29sb3JzLmdyZXlbOTBdLFxuICAgICAgICB6SW5kZXg6IGAyYCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfVxuICByZXR1cm4gKFxuICAgIDxsaVxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICBjc3M9e3tcbiAgICAgICAgLi4uYmFzZVN0eWxlcyxcbiAgICAgICAgLi4udGFiU3R5bGVzW3ZhcmlhbnRdLFxuICAgICAgfX1cbiAgICA+XG4gICAgICB7dG8gPyAoXG4gICAgICAgIDxMaW5rIHRvPXt0b30gb25DbGljaz17b25DbGlja30+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L0xpbms+XG4gICAgICApIDogKFxuICAgICAgICBjaGlsZHJlblxuICAgICAgKX1cbiAgICA8L2xpPlxuICApXG59XG5cblRhYi5wcm9wVHlwZXMgPSB7XG4gIHRvOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBjbGFzc05hbWU6IFByb3BUeXBlcy5zdHJpbmcsXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIHZhcmlhbnQ6IFByb3BUeXBlcy5vbmVPZihbYERFRkFVTFRgLCBgTlVNQkVSRURgXSksXG59XG5cbmV4cG9ydCBkZWZhdWx0IFRhYlxuIl19 */"))
  }, to ? (0, _core.jsx)(_gatsby.Link, {
    to: to,
    onClick: onClick
  }, children) : children);
};

Tab.propTypes = {
  to: _propTypes2["default"].string,
  className: _propTypes2["default"].string,
  onClick: _propTypes2["default"].func,
  children: _propTypes2["default"].node,
  variant: _propTypes2["default"].oneOf(["DEFAULT", "NUMBERED"])
};
exports["default"] = Tab;