const CSSTransitionComponent = ({ className, children, ...props }) => (
  <CSSTransition classNames={className} {...props}>
    {children}
  </CSSTransition>
);

export const ListTransition = styled(CSSTransitionComponent)`
  &-enter {
    opacity: 0;
    max-height: 0;
  }
  &-enter-active {
    opacity: 1;
    max-height: ${({ maxHeight }) => maxHeight};
    transition: ${transition.toggle};
    transition-property: max-height, opacity;
  }
  &-exit {
    opacity: 1;
    max-height: ${({ maxHeight }) => maxHeight};
  }
  &-exit-active {
    opacity: 0;
    max-height: 0;
    transition: ${transition.toggle};
    transition-property: max-height, opacity;
  }
`;