import MuiPopper from '@mui/material/Popper';
import { styled } from '../styled';
import { popoverClassnames } from './constants';
export const StyledMuiPopper = styled(MuiPopper) `
  &.${popoverClassnames.root} {
    z-index: ${({ theme }) => theme.zIndex.tooltip};
  }

  &&[data-popper-placement*='top'] .${popoverClassnames.animatedWrapper} {
    transform-origin: bottom center;

    margin-bottom: ${({ theme }) => theme.spacing(2)};
  }

  &&[data-popper-placement*='bottom'] .${popoverClassnames.animatedWrapper} {
    transform-origin: top center;

    margin-top: ${({ theme }) => theme.spacing(2)};
  }

  &&[data-popper-placement*='left'] .${popoverClassnames.animatedWrapper} {
    transform-origin: right center;

    margin-right: ${({ theme }) => theme.spacing(2)};
  }

  &&[data-popper-placement*='right'] .${popoverClassnames.animatedWrapper} {
    transform-origin: left center;

    margin-left: ${({ theme }) => theme.spacing(2)};
  }
`;
export const AnimatedWrapper = styled.div `
  animation: popover-grow-out
    ${({ theme }) => theme.transitions.duration.enteringScreen}ms
    ${({ theme }) => theme.transitions.easing.easeInOut} forwards;

  &.${popoverClassnames.animatedWrapperOpen} {
    animation: popover-grow-in
      ${({ theme }) => theme.transitions.duration.enteringScreen}ms
      ${({ theme }) => theme.transitions.easing.easeInOut} forwards;
  }

  @keyframes popover-grow-in {
    from {
      transform: scale(0.75, 0.5625);

      opacity: 0;
    }

    to {
      transform: none;

      opacity: 1;
    }
  }

  @keyframes popover-grow-out {
    from {
      transform: none;

      opacity: 1;
    }

    to {
      transform: scale(0.75, 0.5625);

      opacity: 0;
    }
  }
`;
export const InnerContainer = styled.div `
  &.${popoverClassnames.innerContainer} {
    overflow: hidden;

    background: ${({ theme }) => theme.palette.background.paper};
    border-radius: ${({ theme }) => theme.shape.medium};
    box-shadow: ${({ theme }) => theme.elevation[200]};
  }
`;
