import React from 'react'
import styled from 'styled-components'
import {color, card} from 'common/styles'
import {position} from 'polished'

export default ({children}) => (
  <Background>
    <Card>
      {children}
    </Card>
  </Background>
)

const Background = styled.div`
  background-color: ${color('black', 'translucent')};
  padding-top: 50px;
  ${position('fixed', '0', '0', '0', '0')};
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: scroll;
`
const Card = styled.div`
  ${card}
  margin: 0 5px;
  max-width: 600px;
`