import styled from '@emotion/styled'

import theme, { breakpoints } from 'utils/theme'

export const Container = styled.div`
  width: 70px;
  height: 60px;
  border: solid 1px ${theme.colors.textDark};
  opacity: ${(props: any): any => props.active ? 1 : 0.2};
  padding: ${theme.space[1]}px;
  margin: 0 12px 12px 0;

  display: flex;
  align-items: center;
  justify-content: center;

  @media (min-width: ${breakpoints.large}) {
    width: 74px;
    height: 60px;
    margin: 0 14px 14px 0;
  }
`;