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',
  whiteSpace: 'nowrap',
  display: 'flex',
  alignItems: 'center',
  backgroundColor: colors.foreground,
  borderRadiusTopRight: 3,
  borderRadiusBottomRight: 3,
  boxShadow: '5px 5px 20px 5px rgba(0,0,0,0.10)',
})