"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InnerContainer = exports.AnimatedWrapper = exports.StyledMuiPopper = void 0;
const Popper_1 = __importDefault(require("@mui/material/Popper"));
const styled_1 = require("../styled");
const constants_1 = require("./constants");
exports.StyledMuiPopper = (0, styled_1.styled)(Popper_1.default) `
  &.${constants_1.popoverClassnames.root} {
    z-index: ${({ theme }) => theme.zIndex.tooltip};
  }

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

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

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

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

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

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

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

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

  &.${constants_1.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;
    }
  }
`;
exports.InnerContainer = styled_1.styled.div `
  &.${constants_1.popoverClassnames.innerContainer} {
    overflow: hidden;

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