import { jsx as _jsx } from "react/jsx-runtime";
import Tooltip from '@mui/material/Tooltip';
import { styled } from '../styled';
import { tooltipClassnames } from './constants';
export const StyledTooltip = styled(({ className, style, ...props }) => (_jsx(Tooltip, { ...props, PopperProps: { ...props.PopperProps, style }, classes: {
        ...props.classes,
        popper: className,
        tooltip: tooltipClassnames.tooltipLabel,
        arrow: tooltipClassnames.arrow,
    } }))) `
  --tooltip-width: 0;

  &.${tooltipClassnames.withoutMaxWidth} {
    & .${tooltipClassnames.tooltipLabel} {
      width: var(--tooltip-width);
      max-width: none;
    }
  }
  
  & .${tooltipClassnames.tooltipLabel} {
    margin: 0;

    font-size: ${({ size, theme }) => size === 'small'
    ? theme.typography.caption.fontSize
    : theme.typography.body1.fontSize};
    font-weight: ${({ theme }) => theme.typography.fontWeightRegular};
    line-height: ${({ size, theme }) => size === 'small'
    ? theme.typography.caption.lineHeight
    : theme.typography.body1.lineHeight};
    white-space: pre-line;

    background-color: ${({ theme }) => theme.palette.grey[900]};
    border-radius: ${({ theme }) => theme.shape.small};
  }

  & .${tooltipClassnames.arrow} {
    font-size: ${({ theme }) => theme.typography.caption.fontSize};
    color: ${({ theme }) => theme.palette.grey[900]};
  }

  &&[data-popper-placement*='top'] .${tooltipClassnames.tooltipLabel} {
    margin-bottom: ${({ theme }) => theme.spacing(2)};
  }

  &&[data-popper-placement*='bottom'] .${tooltipClassnames.tooltipLabel} {
    margin-top: ${({ theme }) => theme.spacing(2)};
  }

  &&[data-popper-placement*='left'] .${tooltipClassnames.tooltipLabel} {
    margin-right: ${({ theme }) => theme.spacing(2)};
  }

  &&[data-popper-placement*='right'] .${tooltipClassnames.tooltipLabel} {
    margin-left: ${({ theme }) => theme.spacing(2)};
  }
`;
export const ContentWrapper = styled.div `
  display: inherit;
  flex-direction: inherit;
`;
