import { transparentize } from 'polished';
import { DialogOverlay } from '@reach/dialog';
import { styled } from '../../styles';
import { ComponentWithoutProps } from '../utils';

export interface StyleProps {
  isCentered?: boolean;
}

export const Overlay = styled(
  ComponentWithoutProps(DialogOverlay, ['isCentered'])
)(({ theme, isCentered }) => ({
  position: 'fixed',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  overflow: 'auto',
  background: transparentize(0.7, '#ffffff'),
  display: 'flex',
  alignItems: isCentered ? 'center' : 'flex-start',
  justifyContent: 'center',
}));
