'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const fadeIn = styled.keyframes `
    from {
        opacity: 0;
    }
    to {
        opacity: 0.85;
    }
`;
const fadeOut = styled.keyframes `
    from {
        opacity: 0.85;
    }
    to {
        opacity: 0;
    }
`;
const Wrapper = styled__default['default'].div `
  font-family: ${(props) => props.theme.font.familyPrimary};
  cursor: default;
  span {
    cursor: pointer;
  }
`;
const TooltipTitle = styled__default['default'].div `
  font-weight: ${(props) => props.theme.font.weightBold};
`;
const PopoverContainer = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'isVisible',
        'isManual',
        'nonStaticWidth',
    ]),
}) `
  display: flex;
  position: relative;
  flex-direction: column;
  ${(props) => props.variant === 'icon' ? index.getFontSize('size12') : index.getFontSize('size14')};
  background-color: ${index.getColorAlias('containerInverse')};
  opacity: 0.85;
  color: ${index.getColorAlias('contentInverse')};
  width: ${(props) => (props.nonStaticWidth ? '100%' : 'auto')};
  border-radius: ${(props) => props.variant === 'icon'
    ? `${props.theme.radius.roundedE} ${props.theme.radius.roundedE}`
    : props.theme.radius.roundedB};
  ${(props) => props.width &&
    props.variant === 'definition' &&
    !props.nonStaticWidth &&
    styled.css `
      width: ${props.width};
      max-width: 280px;
      min-width: 160px;
    `};
  padding: ${(props) => props.variant === 'icon'
    ? styled.css `
          ${index.getSpacing('s01', 's03')}
        `
    : styled.css `
          ${index.getSpacing('s02', 's03')}
        `};
  ${(props) => props.isManual &&
    styled.css `
      padding-right: 40px;
    `}

  @media(max-width: 600px) {
    ${(props) => props.variant === 'icon' &&
    styled.css `
        padding: 6px 12px;
        ${index.getFontSize('size14')};
      `}
  }

  z-index: 999;
  animation: ${(props) => (props.isVisible ? fadeIn : fadeOut)}
    ${(props) => props.theme.motion.speed.defaultM} ease-in-out;
`;
const CloseIconContainer = styled__default['default'].span `
  position: absolute;
  top: 0px;
  right: 4px;
  cursor: pointer;
  svg {
    fill: ${index.getColorAlias('contentInverse')};
  }
`;

exports.CloseIconContainer = CloseIconContainer;
exports.PopoverContainer = PopoverContainer;
exports.TooltipTitle = TooltipTitle;
exports.Wrapper = Wrapper;
