import styled from 'styled-components'
import theme from '../../../../../theme'
import ArrowRight from './assets/arrow-right.svg'

export const Content = styled.div`
  margin-left: 20px;
  max-width: 345px;
`

export const Title = styled.h4`
  color: ${theme.textStyles.boxTitleLight.color};
  font: ${theme.textStyles.boxTitleLight.font}, sans-serif;
  font-size: ${theme.fontSizes.l};
  margin: 0;
  margin-bottom: 11px;
`

export const TitleIcon = styled.span`
  background-image: url(${ArrowRight});
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  height: 13px;
  margin-left: 11px;
  vertical-align: middle;
  width: 14px;
`

export const Textual = styled.p`
  color: ${theme.colors['dark-blue2']};
  font: ${theme.textStyles.boxText.font}, sans-serif;
  font-size: ${theme.fontSizes.l};
  margin: 0;
`

export default Content
