import styled, { StyledComponent } from '@emotion/styled'
import { Flex, Text } from '@rebass/emotion';
import { css } from '@emotion/core';

import { getColumnSize } from 'utils/styles/grid';
import theme, { space, widths } from 'utils/theme';
import typography from 'utils/typography';
import { forDesktopUp } from 'utils/styles/mixins';

export const HTMLBlock: StyledComponent<any, any, any> = styled(Text)`
ol {
    list-style: none;
    counter-reset: rich-counter;
    margin-top: ${space.regular}px;
    margin-left: ${space.xxsmall}px;
  }
  ol li {
    counter-increment: rich-counter;
    font-size: ${theme.fontSizes[3]};
    margin-top: ${space.regular}px;
    display: flex;
    align-items: baseline;
  }
  ol li::before {
    content: counter(rich-counter) ". ";
    font-size: ${theme.fontSizes[5]};
    font-family: ${typography.options.headerFontFamily};
    margin-right: ${space.xsmall}px;
    ${forDesktopUp(css`
      margin-right: ${space.regular}px;
    `)};
  }
  blockquote {
    font-size: ${theme.fontSizes[8]};
    line-height: ${theme.lineHeights[9]};
    font-style: italic;
    font-family: ${typography.options.headerFontFamily};
    margin-top: ${space.regular}px;
    margin-bottom: ${space.small}px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  h3 {
    margin-top: ${space.small}px;
    margin-bottom: ${space.small}px;
    ${forDesktopUp(css`
      margin: ${space.small}px 0px;
    `)};
  }
`;

export const TextContainer: StyledComponent<any, any, any> = styled(Flex)`
  flex-direction: column;
  align-items: ${(props: any) => props.alignment};
  max-width: ${getColumnSize(8)}px;
  margin-left: auto;
  margin-right: auto;

  ${forDesktopUp(css`
    max-width: ${getColumnSize(8)}px;
    margin-left: ${getColumnSize(2) + widths.gutterWidth}px;
  `)};

  h2 {
    margin-top: ${space.small}px;
    ${forDesktopUp(css`
      margin: ${space.xxsmall}px 0px;
    `)};
  }

  p {
    color: ${theme.colors.textDark};
    font-size: ${theme.fontSizes[2]};
    line-height: ${theme.lineHeights[2]};

    ${forDesktopUp(css`
      font-size: ${theme.fontSizes[3]};
      line-height: ${theme.lineHeights[6]};
      margin: ${space.xsmall}px 0px;
    `)};

    a:-webkit-any-link {
      text-decoration: inherit;
      color: inherit;
      font-weight: bold;
    };
  }
`