elements.tsx

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

export const Wrapper = styled.div`
  position: relative;
  display: flex;
  height: 100%;
  > *:first-child {
    flex: 0 0 300px;
  }
  > *:last-child {
    flex: 1;
  }
`

export const CenterWrapper = styled.div`
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
`

export const ExpandAll = styled<
  {
    isActive: boolean
  },
  'div'
>('div')`
  display: flex;
  position: absolute;
  top: 10px;
  right: ${({ theme }) => theme.padding.normal};
  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')};
  }
`