import styled from "styled-components";
export const Wrapper = styled.div `
  position: relative;
  width: min-content;
  height: min-content;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
`;
export const ContentWrapper = styled.div `
  position: absolute;
  box-sizing: border-box;

  ${(props) => (props.bottom ? "top" : "bottom")}: calc(100% + 20px);
  ${(props) => (props.right ? "left" : "right")}: calc(50% - 38px);

  min-height: 50px;
  min-width: 80px;
  padding: ${({ padding }) => padding ?? "16px 20px 16px 24px"};

  border-radius: 2px;
  border-width: 1px;
  border-style: solid;
  border-color: ${({ theme, borderColor }) => borderColor ?? theme.new?.colors?.primary900 ?? "transparent"};
  background-color: ${({ theme, backgroundColor }) => backgroundColor ?? theme.new?.colors?.white900 ?? "transparent"};

  font-size: 12px;
  line-height: 16px;

  ::after {
    content: "";
    position: absolute;
    height: 22px;
    width: 100%;
    ${(props) => (props.bottom ? "top" : "bottom")}: -22px;
    ${(props) => (props.right ? "left" : "right")}: 0;
  }

  ::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    height: 17px;
    width: 17px;
    ${(props) => (props.bottom ? "top" : "bottom")}: -8px;
    ${(props) => (props.right ? "left" : "right")}: 29px;
    transform: rotate(${(props) => (props.bottom ? -135 : 45)}deg);

    box-shadow: 1px 1px
      ${({ theme, borderColor }) => borderColor ?? theme.new?.colors?.primary900 ?? "transparent"};
    background-color: ${({ theme, backgroundColor }) => backgroundColor ?? theme.new?.colors?.white900 ?? "transparent"};
  }
`;
//# sourceMappingURL=tooltip.styled.js.map