styles.ts

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

export const operator = css({
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  cursor: 'default',
})

export const effectArgs = css({
  display: 'flex',
  alignItems: 'center',
  '> span': {
    marginRight: '0.5rem',
  },
})

export const value = css({
  marginLeft: 'auto',
  marginRight: '0.5rem',
  display: 'flex',
  alignItems: 'center',
})

export const operatorType = css({
  color: colors.background,
  backgroundColor: colors.highlight,
  padding: '0 0.5rem',
  borderTopLeftRadius: 3,
  borderBottomLeftRadius: 3,
  fontSize: 14,
})

export const operatorName = css({
  marginLeft: '0.5rem',
})

export const notVisible = css({
  visibility: 'hidden',
})

export const operatorHeader = css({
  display: 'flex',
  backgroundColor: colors.border,
  borderRadius: 3,
  alignItems: 'stretch',
})

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

export const operatorItem = css({
  display: 'flex',
  alignItems: 'center',
  marginBottom: '0.5rem',
  '> *': {
    marginRight: 10,
  },
})

export const effectError = css({
  backgroundColor: colors.red,
  color: colors.text,
  padding: '0.1rem 0.5rem',
  fontsize: 14,
  borderRadius: 2,
})

const pulse = keyframes({
  from: {
    opacity: 0.5,
  },
  to: {
    opacity: 1,
  },
})

export const pendingOperatorItem = css({
  animation: `${pulse} 1s ease-out infinite`,
  animationDirection: 'alternate',
})