import styled from '@emotion/styled';
import { Box, Text } from '@rebass/emotion';
import theme from 'utils/theme';

export const Container: any = styled(Box)`
  font-size: ${theme.fontSizes[1]}px;
`;

export const Timer: any = styled.span`
  font-weight: bold;
`;

export const Divider: any = styled.span`
  &:before,
  &:after {
    position: absolute;
    top: 0;
    content: ':';
  }

  &:before {
    left: 30%;
  }

  &:after {
    left: 70%;
  }
`;

export const Time: any = styled(Text)`
  margin-bottom: 0;
`;