elements.tsx

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

export const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  padding: ${({ theme }) => theme.padding.normal};
  height: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
`

export const Panels = styled.div`
  display: flex;
  justify-content: space-around;
`

export const Panel = styled.div`
  padding: ${({ theme }) => theme.padding.smaller};
`

export const ComponentContainer = styled<
  {
    canExpand: boolean
  },
  'div'
>('div')`
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: ${({ theme }) => `0 ${theme.padding.small}`};
  background-color: ${({ canExpand, theme }) =>
    canExpand ? theme.color.lighten(theme.color.white, -0.01) : 'transparent'};
  > div {
    flex: 1;
  }
  > p {
    position: absolute;
    top: ${({ theme }) => theme.padding.smaller};
    right: ${({ theme }) => theme.padding.small};
  }
`

export const StatsContainer = styled.div`
  margin-bottom: ${({ theme }) => theme.padding.large};
`