elements.tsx

import styled from '../../styled-components'
import { Colors } from '../../theme'

export const Operator = styled<
  {
    borderColor: keyof Colors
    onClick: any
  },
  'div'
>('div')`
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: ${({ theme }) => `0 ${theme.padding.smaller}`};
  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
  border: 1px solid ${({ theme, borderColor }) => theme.color[borderColor]};
  background-color: #fff;
  border-radius: ${({ theme }) => theme.borderRadius.normal};
`

export const OperatorHeader = styled.div`
  display: flex;
  align-items: center;
  > *:first-child {
    margin-right: 10px;
  }
  > *:nth-child(3) {
    margin-left: auto;
    color: ${({ theme }) => theme.color.fade(theme.color.black, 0.75)};
  }
`

export const OperatorItem = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: ${({ theme }) => theme.padding.smaller};
  > * {
    margin-right: 10px;
  }
`