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

var _templateObject;

import React, { useEffect, useState } from 'react'; // eslint-disable-line

import styled from 'styled-components';
import { useBasketTotalCount } from '@sentecacommerce-theme/lib';
export var AnimatedBasketCount = () => {
  var [animate, setAnimate] = useState(false);
  var bagCount = useBasketTotalCount();
  useEffect(() => {
    setAnimate(true);
    var animateTimeout = setTimeout(() => {
      setAnimate(false);
    }, 400);
    return () => clearTimeout(animateTimeout);
  }, [bagCount]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, bagCount > 0 && /*#__PURE__*/React.createElement(Count, null, /*#__PURE__*/React.createElement("span", {
    style: {
      transform: animate ? 'scale(1.1)' : 'scale(1)'
    }
  }, bagCount)));
};
var Count = styled.span.attrs({
  className: 'd-block'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 0;\n  width: 24px;\n  height: 24px;\n\n  & > span {\n    position: absolute;\n\n    z-index: 1;\n    font-family: ", ";\n    font-size: 1.1rem;\n    font-weight: 1000;\n    top: -0.6rem;\n    right: -0.6rem;\n    width: 1.5rem;\n    height: 1.5rem;\n    line-height: 1.6rem;\n    border-radius: 50%;\n    background-color: ", ";\n    color: ", ";\n    color: var(--menu-background);\n    background-color: var(--menu-color);\n    text-align: center;\n\n    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);\n  }\n  &:hover > span {\n    box-shadow: -2px 3px 5px -3px #000;\n  }\n"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.typography.fontFamily[2];
}, (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map