import { styled, css } from 'styled-components';
import themeGet from '../../utils/theme-get.js';
import { Box } from '../box/index.js';
const ARROW_WIDTH = 7;
const topCSS = css(["margin-top:-", ";&::after,&::before{top:100%;left:50%;}&::after{margin-left:-", "px;border-color:", " transparent transparent transparent;}&::before{margin-left:-", "px;border-color:", " transparent transparent transparent;}"], props => props.isVisible ? themeGet('space', 'lg')(props) : '0px', ARROW_WIDTH, themeGet('colors', 'grey20'), ARROW_WIDTH - 1, themeGet('colors', 'highlight'));
const bottomCSS = css(["margin-top:", ";&::after,&::before{bottom:100%;left:50%;}&::after{margin-left:-", "px;border-color:transparent transparent ", " transparent;}&::before{margin-left:-", "px;border-color:transparent transparent ", " transparent;}"], props => props.isVisible ? themeGet('space', 'lg')(props) : '0px', ARROW_WIDTH, themeGet('colors', 'grey20'), ARROW_WIDTH - 1, themeGet('colors', 'highlight'));
const leftCSS = css(["margin-left:-", ";&::after,&::before{left:100%;top:50%;}&::after{margin-right:-", "px;margin-top:-", "px;border-color:transparent transparent transparent ", ";}&::before{margin-right:-", "px;margin-top:-", "px;border-color:transparent transparent transparent ", ";}"], props => props.isVisible ? themeGet('space', 'lg')(props) : '0px', ARROW_WIDTH, ARROW_WIDTH, themeGet('colors', 'grey20'), ARROW_WIDTH - 1, ARROW_WIDTH - 1, themeGet('colors', 'highlight'));
const rightCSS = css(["margin-left:", ";&::after,&::before{right:100%;top:50%;}&::after{margin-left:-", "px;margin-top:-", "px;border-color:transparent ", " transparent transparent;}&::before{margin-left:-", "px;margin-top:-", "px;border-color:transparent ", " transparent transparent;}"], props => props.isVisible ? themeGet('space', 'lg')(props) : '0px', ARROW_WIDTH, ARROW_WIDTH, themeGet('colors', 'grey20'), ARROW_WIDTH - 1, ARROW_WIDTH - 1, themeGet('colors', 'highlight'));
const getPadding = props => {
  const px = props.size === 'lg' ? 'xl' : 'md';
  const py = props.size === 'lg' ? 'lg' : 'sm';
  return `${themeGet('space', py)(props)} ${themeGet('space', px)(props)}`;
};
const StyledTooltip = styled(Box).withConfig({
  displayName: "tooltip-styled__StyledTooltip",
  componentId: "sc-1htd4ul-0"
})(["transition:opacity 0.2s,margin 0.2s;position:absolute;opacity:", ";padding:", ";pointer-events:none;&::after{content:\" \";position:absolute;border-style:solid;border-width:7px;z-index:1;}&::before{content:\" \";position:absolute;border-style:solid;border-width:6px;z-index:2;}", ""], ({
  isVisible
}) => isVisible ? '1' : '0', props => getPadding(props), props => ({
  top: topCSS,
  bottom: bottomCSS,
  left: leftCSS,
  right: rightCSS
})[props.direction]);
StyledTooltip.defaultProps = {
  borderColor: 'grey20',
  borderStyle: 'solid',
  borderWidth: '1px',
  bg: 'highlight',
  borderRadius: '3px'
};
export default StyledTooltip;
export { StyledTooltip };