import styled from "styled-components";
import { composeStyle } from "../../util";
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 `
  ${({ width }) => composeStyle("width", width)}

  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;

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

  ::after {
    content: "";
    position: absolute;
    height: 20px;
    width: 100%;
    ${(props) => (props.bottom ? "top" : "bottom")}: -20px;
    ${(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 }) => theme.colors?.primary ?? "transparent"};
    background-color: ${({ theme }) => theme.new?.colors?.white900 ?? "transparent"};
  }
`;
//# sourceMappingURL=styled.js.map