import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3;

import React from 'react';
import styled from 'styled-components';
import Link from 'next/link';
import { NavbarFavoritesIcon, BasketIcon, Hamburger, MagnifyingGlass } from '../../../Common/Icons';
import { AnimatedBasketCount } from '../AnimatedBasketCount';
import { AnimatedFavoritesCount } from '../AnimatedFavoritesCount';
export var CTAButtons = (_ref) => {
  var {
    handleMobileMenu,
    handleSearchBox
  } = _ref;
  return /*#__PURE__*/React.createElement(Container, {
    className: "px-2 mx-1 px-lg-0"
  }, /*#__PURE__*/React.createElement(Link, {
    href: "/favorites",
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/React.createElement(IconContainer, {
    className: "py-1 mx-1 px-2 p-lg-0 mr-lg-0",
    isDesktop: true
  }, /*#__PURE__*/React.createElement(AnimatedFavoritesCount, null), /*#__PURE__*/React.createElement(NavbarFavoritesIcon, null))), /*#__PURE__*/React.createElement(Link, {
    href: "/basket",
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/React.createElement(IconContainer, {
    className: "py-1 mx-1 px-2 p-lg-0 ml-lg-3",
    isBasket: true
  }, /*#__PURE__*/React.createElement(AnimatedBasketCount, null), /*#__PURE__*/React.createElement(BasketIcon, null))), /*#__PURE__*/React.createElement(IconContainer, {
    className: "py-1 mx-1 px-2 p-lg-0",
    isMobile: true,
    onClick: () => handleSearchBox(true)
  }, /*#__PURE__*/React.createElement(MagnifyingGlass, null)), /*#__PURE__*/React.createElement(IconContainer, {
    className: "py-1 mx-1 px-2 p-lg-0",
    isMobile: true,
    onClick: handleMobileMenu
  }, /*#__PURE__*/React.createElement(Hamburger, null)));
};
var CountSpan = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
});
var IconContainer = styled.a(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), props => props.isDesktop && "\n  @media (max-width:" + props.theme.breakpoints.md.max + ") {\n    display: none;\n  }\n  ", props => props.isMobile && "\n    @media (min-width:" + props.theme.breakpoints.lg.min + ") {\n    display: none;\n  }\n  ");
//# sourceMappingURL=index.js.map