import styled from "styled-components";
import { currentTheme } from "../../theme";
export const HoverTooltip = styled.div `
  width: ${(props) => props?.width ?? "356px"};
  min-height: ${(props) => props?.height ?? "154px"};
  background: ${(props) => props?.light ? "#f9fcff" : currentTheme.colors.pale};
  border-radius: 2px;
  padding: 16px 25px;
  position: absolute;
  top: ${(props) => props?.top ?? "40px"};
  ${(props) => (props?.left ? `left: ${props?.left};` : "right: -30px;")}
  z-index: 100;
  pointer-events: none;

  ::after {
    content: "";
    height: 25px;
    width: 25px;
    position: absolute;
    z-index: -1;
    ${(props) => (props?.top ? "bottom" : "top")}: -7px;
    ${(props) => (props?.left ? "left: 26px;" : "right: 26px;")}
    transform: rotate(45deg);
    background: ${(props) => props?.light ? "#f9fcff" : currentTheme.colors.pale};
  }
`;
//# sourceMappingURL=index.js.map