"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.CTAButtons = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _link = _interopRequireDefault(require("next/link"));

var _Icons = require("../../../Common/Icons");

var _AnimatedBasketCount = require("../AnimatedBasketCount");

var _AnimatedFavoritesCount = require("../AnimatedFavoritesCount");

var _templateObject, _templateObject2, _templateObject3;

var CTAButtons = function CTAButtons(_ref) {
  var handleMobileMenu = _ref.handleMobileMenu,
      handleSearchBox = _ref.handleSearchBox;
  return /*#__PURE__*/_react["default"].createElement(Container, {
    className: "px-2 mx-1 px-lg-0"
  }, /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: "/favorites",
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement(IconContainer, {
    className: "py-1 mx-1 px-2 p-lg-0 mr-lg-0",
    isDesktop: true
  }, /*#__PURE__*/_react["default"].createElement(_AnimatedFavoritesCount.AnimatedFavoritesCount, null), /*#__PURE__*/_react["default"].createElement(_Icons.NavbarFavoritesIcon, null))), /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: "/basket",
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement(IconContainer, {
    className: "py-1 mx-1 px-2 p-lg-0 ml-lg-3",
    isBasket: true
  }, /*#__PURE__*/_react["default"].createElement(_AnimatedBasketCount.AnimatedBasketCount, null), /*#__PURE__*/_react["default"].createElement(_Icons.BasketIcon, null))), /*#__PURE__*/_react["default"].createElement(IconContainer, {
    className: "py-1 mx-1 px-2 p-lg-0",
    isMobile: true,
    onClick: function onClick() {
      return handleSearchBox(true);
    }
  }, /*#__PURE__*/_react["default"].createElement(_Icons.MagnifyingGlass, null)), /*#__PURE__*/_react["default"].createElement(IconContainer, {
    className: "py-1 mx-1 px-2 p-lg-0",
    isMobile: true,
    onClick: handleMobileMenu
  }, /*#__PURE__*/_react["default"].createElement(_Icons.Hamburger, null)));
};

exports.CTAButtons = CTAButtons;

var CountSpan = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: block;\n  position: absolute;\n  left: 15px;\n  text-align: center;\n  width: 15px;\n  height: 15px;\n  font-size: 10px;\n  visibility: visible;\n  color: #fff;\n  top: 18px;\n  font-weight: 900;\n  background: #ff4444;\n  border-radius: 50%;\n  @media (max-width: 768px) {\n    top: 6px;\n  }\n"])));

var Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n\n  [data-is-active='true'] ~ & {\n    visibility: hidden;\n  }\n\n  @media (max-width: ", ") {\n    position: absolute;\n    right: 0;\n    top: 16%;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
});

var IconContainer = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: var(--menu-color);\n  cursor: pointer;\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n\n  & svg {\n    fill: var(--menu-color);\n  }\n\n  &:hover svg {\n    opacity: 0.8;\n  }\n\n  ", "\n\n  ", "\n"])), function (props) {
  return props.isDesktop && "\n  @media (max-width:" + props.theme.breakpoints.md.max + ") {\n    display: none;\n  }\n  ";
}, function (props) {
  return props.isMobile && "\n    @media (min-width:" + props.theme.breakpoints.lg.min + ") {\n    display: none;\n  }\n  ";
});
//# sourceMappingURL=index.js.map