@kiwicom/smart-faq/lib/SmartFAQ/common/Tooltip/Tooltip.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

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

var _classnames = _interopRequireDefault(require("classnames"));

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

// @flow
var Tooltip = function Tooltip(_ref) {
  var open = _ref.open,
      white = _ref.white,
      placement = _ref.placement,
      placementMobile = _ref.placementMobile,
      className = _ref.className,
      children = _ref.children,
      mobileArrow = _ref.mobileArrow;
  return _react.default.createElement("div", {
    role: "tooltip",
    className: "jsx-3437016480" + " " + ((0, _classnames.default)('Tooltip', className, placement, placementMobile, {
      _in: open,
      _out: !open,
      _white: white
    }) || "")
  }, _react.default.createElement("div", {
    className: "jsx-3437016480" + " " + ((0, _classnames.default)('Tooltip-arrow', {
      _mobileHide: mobileArrow
    }) || "")
  }), _react.default.createElement("div", {
    className: "jsx-3437016480" + " " + "Tooltip-inner"
  }, children), _react.default.createElement(_style.default, {
    styleId: "3437016480",
    css: ".Tooltip.jsx-3437016480{position:absolute;z-index:999;display:none;}.Tooltip.jsx-3437016480 .Tooltip-inner.jsx-3437016480{max-width:200px;padding:8px;color:#fff;text-align:center;background-color:#171b1e;border-radius:3px;font-size:12px;line-height:18px;}.Tooltip.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;}.Tooltip._in.jsx-3437016480{display:block;-webkit-animation:fadein 0.2s;-webkit-animation:fadein-jsx-3437016480 0.2s;animation:fadein-jsx-3437016480 0.2s;}.Tooltip._out.jsx-3437016480{-webkit-animation:fadeout 0.2s;-webkit-animation:fadeout-jsx-3437016480 0.2s;animation:fadeout-jsx-3437016480 0.2s;}.Tooltip._autoWidth.jsx-3437016480{min-width:auto;width:auto;white-space:nowrap;}.Tooltip._white.jsx-3437016480 .Tooltip-inner.jsx-3437016480{border:1px solid #c6d0dc;box-shadow:0 4px 22px #e9eef2,0 2px 5px #e9eef2;background-color:#fff;color:#2e353b;}.Tooltip._white.jsx-3437016480 .Tooltip-arrow.jsx-3437016480:after{position:absolute;content:'';border-style:solid;border-color:transparent;}@media (max-width:768px){.Tooltip._white.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{border-left-color:#c6d0dc !important;}.Tooltip._white.jsx-3437016480 .Tooltip-arrow.jsx-3437016480:after{margin-top:-4px;margin-left:-6px;border-width:4px;border-right-width:0;border-left-color:#fff;}}@media (min-width:769px){.Tooltip._white.top.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{border-top-color:#c6d0dc;}.Tooltip._white.top.jsx-3437016480 .Tooltip-arrow.jsx-3437016480:after{left:50%;margin-top:-6px;margin-left:-4px;border-width:4px;border-bottom-width:0;border-top-color:#fff;}.Tooltip._white.right.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{border-right-color:#c6d0dc;}.Tooltip._white.right.jsx-3437016480 .Tooltip-arrow.jsx-3437016480:after{top:50%;margin-left:2px;margin-top:-4px;border-width:4px;border-left-width:0;border-right-color:#fff;}.Tooltip._white.bottom.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{border-bottom-color:#c6d0dc;}.Tooltip._white.bottom.jsx-3437016480 .Tooltip-arrow.jsx-3437016480:after{left:50%;margin-top:2px;margin-left:-4px;border-width:4px;border-top-width:0;border-bottom-color:#fff;}.Tooltip._white.left.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{border-left-color:#c6d0dc;}.Tooltip._white.left.jsx-3437016480 .Tooltip-arrow.jsx-3437016480:after{top:50%;margin-left:-6px;margin-top:-4px;border-width:4px;border-right-width:0;border-left-color:#fff;}}@media (max-width:768px){.Tooltip.jsx-3437016480{min-width:100px;}.Tooltip.sm-top.jsx-3437016480{margin-top:-3px;padding:5px 0;}.Tooltip.sm-right.jsx-3437016480,.Tooltip.sm-right-top.jsx-3437016480{margin-left:3px;padding:0 5px;}.Tooltip.sm-bottom.jsx-3437016480{margin-top:3px;padding:5px 0;}.Tooltip.sm-left.jsx-3437016480,.Tooltip.sm-left-top.jsx-3437016480{margin-left:-3px;padding:0 5px;}.Tooltip.sm-top.jsx-3437016480{bottom:20px;left:50%;-webkit-transform:translateX(-50%);-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}.Tooltip.sm-top.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#171b1e;}.Tooltip.sm-right.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#171b1e;}.Tooltip.sm-left.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#171b1e;}.Tooltip.sm-bottom.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#171b1e;}.Tooltip.sm-left-top.jsx-3437016480 .Tooltip-arrow.jsx-3437016480,.Tooltip.sm-right-top.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{top:15px;margin-top:-5px;}.Tooltip.sm-left-top.jsx-3437016480{top:0;right:23px;}.Tooltip.sm-left-top.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{right:0;border-width:5px 0 5px 5px;border-left-color:#171b1e;}.Tooltip.sm-right-top.jsx-3437016480{top:0;left:23px;}.Tooltip.sm-right-top.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{left:0;border-width:5px 5px 5px 0;border-right-color:#171b1e;}.Tooltip._bookingPayment.jsx-3437016480{width:200px;-webkit-transform:translateY(-15px);-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px);}.Tooltip.jsx-3437016480 .Tooltip-arrow._mobileHide.jsx-3437016480{display:none;}}@media (min-width:769px){.Tooltip.top.jsx-3437016480{margin-top:-3px;padding:5px 0;}.Tooltip.right.jsx-3437016480{margin-left:3px;padding:0 5px;}.Tooltip.bottom.jsx-3437016480{margin-top:3px;padding:5px 0;}.Tooltip.left.jsx-3437016480{margin-left:-3px;padding:0 5px;}.Tooltip.top.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#171b1e;}.Tooltip.right.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#171b1e;}.Tooltip.left.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#171b1e;}.Tooltip.bottom.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#171b1e;}.Tooltip.top.arrow-start.jsx-3437016480 .Tooltip-arrow.jsx-3437016480,.Tooltip.bottom.arrow-start.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{left:10px;}.Tooltip.top.arrow-end.jsx-3437016480 .Tooltip-arrow.jsx-3437016480,.Tooltip.bottom.arrow-end.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{left:auto;right:10px;}.Tooltip.left.arrow-start.jsx-3437016480 .Tooltip-arrow.jsx-3437016480,.Tooltip.right.arrow-start.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{top:10px;}.Tooltip.left.arrow-end.jsx-3437016480 .Tooltip-arrow.jsx-3437016480,.Tooltip.right.arrow-end.jsx-3437016480 .Tooltip-arrow.jsx-3437016480{top:auto;bottom:10px;}}"
  }));
};

Tooltip.defaultProps = {
  placement: 'top',
  placementMobile: 'sm-left-top'
};
var _default = Tooltip;
exports.default = _default;