elements.tsx

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

export const Wrapper = styled.div`
  background-color: ${({ theme }) => theme.color.dark};
  width: 50px;
`

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.white : theme.color.fade(theme.color.white, 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.white};
  }
`