styles.ts

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

export const flush = css({
  cursor: 'pointer',
  backgroundColor: colors.yellow,
  borderTopRightRadius: 3,
  borderBottomRightRadius: 3,
  position: 'relative',
  marginLeft: '0.5rem',
  ':hover div:nth-child(2)': {
    display: 'block',
    zIndex: 2,
  },
  ':hover': {
    borderBottomRightRadius: 0,
  },
})

export const flushHeader = css({
  display: 'flex',
  alignItems: 'center',
  color: colors.foreground,
  padding: '0 0.5rem',
  fontSize: 12,
  fontWeight: 'bold',
  '> span': {
    display: 'flex',
    alignItems: 'center',
  },
  '> span svg': {
    marginLeft: 3,
  },
  '> span:last-child': {
    marginLeft: '0.5rem',
  },
})

export const flushBody = css({
  position: 'absolute',
  top: '100%',
  right: 0,
  padding: '0.5rem 1rem',
  backgroundColor: colors.foreground,
  borderBottomRightRadius: 3,
  display: 'none',
  flexWrap: 'wrap',
  boxShadow: '0px 10px 13px 0px rgba(0,0,0,0.1)',
  '> *:not(:last-child)': {
    marginRight: 15,
  },
})

export const flushItem = css({
  display: 'flex',
  alignItems: 'center',
  '> :first-child': {
    marginRight: 3,
  },
})

export const icon = css({
  opacity: 0.75,
  display: 'flex',
  alignItems: 'center',
})