elements.tsx

import styled from '../../styled-components'

export const Wrapper = styled.div`
  padding: ${({ theme }) => theme.padding.normal};
  background-color: ${({ theme }) => theme.color.fade(theme.color.white, 0.1)};
  overflow-y: scroll;
`

export const Container = styled.div``

export const Pipe = styled.div`
  display: flex;
  align-items: center;
  margin: ${({ theme }) => `${theme.padding.small} 0`};
`

export const ExpandAll = styled<
  {
    isActive: boolean
  },
  'div'
>('div')`
  display: flex;
  justify-content: flex-end;
  font-size: ${({ theme }) => theme.fontSize.small};
  cursor: pointer;
  color: ${({ theme }) => theme.color.black};
  opacity: ${({ isActive }) => (isActive ? '1' : '0.5')};
  :hover {
    opacity: ${({ isActive }) => (isActive ? '1' : '0.75')};
  }
`