styles.ts

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

export const wrapper = css({
  display: 'flex',
  flexDirection: 'column',
  padding: '2rem 1rem',
  height: '100vh',
  boxSizing: 'border-box',
  overflowY: 'scroll',
})

export const panels = css({
  display: 'flex',
  justifyContent: 'space-around',
  marginBottom: '2rem',
})

export const panel = css({
  padding: '0.25rem',
  '> span': {
    margin: '0 0.25rem',
  },
})

export const flushWrapper = css({
  margin: '0.5rem 1rem',
})

export const flushHeader = css({
  display: 'flex',
})

export const flushTitle = css({
  flex: 0,
  padding: '0 0.5rem',
  backgroundColor: colors.highlight,
  color: colors.foreground,
  borderTopLeftRadius: 3,
  borderBottomLeftRadius: 3,
})

export const flushDetails = css({
  flex: 1,
  backgroundColor: colors.foreground,
  borderTopRightRadius: 3,
  borderBottomRightRadius: 3,
})

export const flushBody = css({
  display: 'flex',
  flexDirection: 'column',
  padding: '0.5rem',
})

export const mutation = css({
  display: 'flex',
  alignItems: 'center',
  '> *': {
    marginRight: '1rem',
  },
})