import styled, { StyledComponent } from '@emotion/styled';

import { FadeInOutTransitionGroup } from 'utils/styles/mixins'

import { Box } from '@rebass/emotion';
import { Z_INDEX } from 'utils/constants/z-indexes';

export const OverlayContainer: StyledComponent<any, any, any> = styled(Box)`
  ${FadeInOutTransitionGroup}
  height: ${(props): string => props.windowHeight}px;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  position: fixed;
  justify-content: center;
  width: 100%;
  z-index: ${Z_INDEX.OVERLAY};
  background: ${(props): string => props.background};
`