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

var _templateObject, _templateObject2;

import React from 'react';
import styled from 'styled-components';
export var CloseIcon = (_ref) => {
  var {
    handleClick
  } = _ref;
  return /*#__PURE__*/React.createElement(Container, {
    className: "p-2",
    onClick: handleClick
  }, /*#__PURE__*/React.createElement(SVGWrapper, null, /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 9 9",
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M5.37 4.5l3.45-3.46a.61.61 0 0 0-.87-.86L4.5 3.63 1.04.18a.61.61 0 0 0-.86.86L3.63 4.5.18 7.95a.61.61 0 0 0 .86.87L4.5 5.37l3.45 3.45a.61.61 0 0 0 .87-.87L5.37 4.5z"
  }))));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 4.2rem;\n  min-width: 4.2rem;\n  height: 4.2rem;\n  min-height: 4.2rem;\n  border: 0.1rem solid;\n  border-radius: 50%;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  top: 12px;\n  right: 12px;\n  background: #fff;\n  border: none;\n  color: #222;\n  position: absolute;\n  transform: translateX(0);\n  outline: none;\n\n  &:hover {\n    background: #f5f5f5;\n    border-color: #eee;\n  }\n\n  @media (min-width: ", ") {\n    width: 3.7rem;\n    min-width: 3.7rem;\n    height: 3.7rem;\n    min-height: 3.7rem;\n  }\n\n  cursor: pointer;\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.min;
});
var SVGWrapper = styled.svg(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  top: auto;\n  right: auto;\n  max-width: 100%;\n  height: 1.5rem;\n  height: 1.2rem;\n"])));
//# sourceMappingURL=index.js.map