"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StateWrapper = exports.Wrapper = void 0;
const styled_1 = require("../../styled");
const constants_1 = require("../constants");
const slideDown = (0, styled_1.keyframes) `
  0% {
    max-height: 0;
  }

  100% {
    max-height: var(--details-height);
  }
`;
const slideUp = (0, styled_1.keyframes) `
  0% {
    max-height: var(--details-height);
  }

  100% {
    max-height: 0;
  }
`;
exports.Wrapper = styled_1.styled.div `
  position: relative;

  width: 100%;

  .${constants_1.expansionPanelClassnames.root} & {
    overflow: hidden;

    max-height: 0;

    animation: ${slideUp} var(--animation-duration);
  }

  .${constants_1.expansionPanelClassnames.root}.${constants_1.expansionPanelClassnames.open} & {
    max-height: none;

    animation: ${slideDown} var(--animation-duration);
  }

  .${constants_1.expansionPanelClassnames.root}.${constants_1.expansionPanelClassnames.open}.${constants_1.expansionPanelClassnames.animation}
    & {
    max-height: var(--details-height);
  }
`;
exports.StateWrapper = styled_1.styled.div `
  overflow: hidden;
  display: flex;

  padding: ${({ theme }) => theme.spacing(1, 3, 3, 3)};
`;
