import { keyframes, styled } from '../../styled';
import { expansionPanelClassnames } from '../constants';
const slideDown = keyframes `
  0% {
    max-height: 0;
  }

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

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

  width: 100%;

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

    max-height: 0;

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

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

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

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

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