styles.ts

import { css } from 'emotion'

export const wrapper = css`
  display: flex;
  flex-direction: column;
  padding: var(--padding-5);
  height: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
`

export const panels = css`
  display: flex;
  justify-content: space-around;
`

export const panel = css`
  padding: var(--padding-2);
  > span {
    margin: 0 var(--padding-2);
  }
`

export const componentContainer = (canExpand: boolean) => css`
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: ${canExpand ? 'var(--color-dark-3)' : 'transparent'};
  > div {
    flex: 1;
  }
  > p {
    position: absolute;
    top: var(--padding-2);
    right: var(--padding-3);
  }
`

export const statsContainer = css`
  margin-bottom: var(--padding-5);
`