styles.ts

import { css } from 'emotion'
import { colors } from '../../theme'

export const wrapper = css({
  position: 'absolute',
  left: '100%',
  height: '100%',
  zIndex: 999999,
  top: 0,
})

export const overlay = css({
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100vw',
  height: '100vh',
})

export const contentWrapper = css({
  position: 'absolute',
  top: 0,
  left: 0,
  height: '100%',
  padding: '0.5rem',
  boxSizing: 'border-box',
  display: 'flex',
  backgroundColor: colors.dark,
  borderRadiusTopRight: 3,
  borderRadiusBottomRight: 3,
  boxShadow: '5px 5px 20px 5px rgba(0,0,0,0.10)',
})

export const input = css({
  border: 0,
  outline: 'none',
  padding: '0.5rem',
  fontSize: 18,
  borderRadius: 3,
})

export const button = css({
  border: 0,
  borderRadius: 3,
  outline: 'none',
  cursor: 'pointer',
  marginLeft: '0.5rem',
})