elements.tsx

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

export const Wrapper = styled.div`
  background-color: ${({ theme }) => theme.color.white};
  width: 50px;
  border-right: 1px solid ${({ theme }) => theme.color.gray};
`

export const Button = styled<
  {
    active: boolean
  },
  'button'
>('button')`
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: ${({ theme }) => `${theme.padding.smaller} 0`};
  color: ${({ theme, active }) =>
    active ? theme.color.black : theme.color.fade(theme.color.black, 0.5)};
  font-size: ${({ theme }) => theme.fontSize.large};
  justify-content: center;
  outline: none;
  border: 0;
  background-color: transparent;
  width: 50px;
  height: 50px;
  :hover {
    color: ${({ theme }) => theme.color.black};
  }
`

export const Divider = styled.div`
  border-bottom: 1px solid ${({ theme }) => theme.color.gray};
  margin: 0 5px;
`