styles.ts

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

export const wrapper = css({
  flex: '0 0 250px',
  position: 'relative',
  borderTopLeftRadius: 3,
  borderBottomLeftRadius: 3,
  backgroundColor: colors.foreground,
  display: 'flex',
  padding: '0 1rem',
  alignItems: 'center',
  cursor: 'pointer',
  color: colors.text,
})

export const inputWrapper = css({
  position: 'relative',
  flex: 1,
  height: '100%',
  margin: 0,
  padding: 0,
})

export const input = css({
  position: 'absolute',
  border: 0,
  left: '-1rem',
  fontFamily: 'inherit',
  outline: 'none',
  backgroundColor: 'transparent',
  color: colors.text,
  height: '100%',
  boxSizing: 'border-box',
  fontSize: 16,
  width: '100%',
  padding: '0.5rem',
  '::placeholder': {
    color: 'rgba(255,255,255,0.25)',
  },
})

export const inputActive = css({
  paddingLeft: '1.5rem',
})

export const suggestion = css({
  position: 'absolute',
  display: 'flex',
  alignItems: 'center',
  height: '100%',
  boxSizing: 'border-box',
  left: '-1rem',
  fontSize: 16,
  padding: '0.5rem',
  opacity: 0.5,
})

export const indicator = css({
  display: 'inline-block',
  width: 10,
  height: 10,
  borderRadius: 2,
})

export const selectedAction = css({
  padding: '0 0.5rem',
})

export const noSelectedAction = css({
  opacity: 0.5,
})

export const resultWrapper = css({
  position: 'absolute',
  top: '100%',
  minWidth: '100%',
  maxHeight: '75vh',
  overflowY: 'scroll',
  left: 0,
  backgroundColor: colors.border,
  borderBottomLeftRadius: 3,
  borderBottomRightRadius: 3,
  zIndex: 2,
})

export const result = css({
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  padding: '0.25rem 1rem',
  '> :first-child': {
    marginRight: '0.5rem',
  },
  ':hover': {
    backgroundColor: colors.foreground,
  },
})