import styled from 'styled-components';

const IconWrapper = styled.div`
  margin: 0;
  padding: 0;
`;

const ResultWrapper = styled.div`
  text-align: center;
  margin: 0;
  padding: 0;

  ${IconWrapper} > i {
    font-size: ${({ theme }) => theme.fontSizes.result.icon};
  }
`;

const ResultImg = styled.img`
  margin: 0;
  padding: 0;
`;

const TitleWrapper = styled.div`
  color: ${({ theme }) => theme.colors.result.default};
  font-size: ${({ theme }) => theme.fontSizes.result.title};
  font-weight: ${({ theme }) => theme.fontWeights.result.title};
  line-height: ${({ theme }) => theme.lineHeights.result.title};
  margin: ${({ theme }) => theme.space.result.titleMargin};
  padding: 0;
`;

const SubTitleWrapper = styled.div`
  color: ${({ theme }) => theme.colors.result.default};
  font-size: ${({ theme }) => theme.fontSizes.result.subTitle};
  font-weight: ${({ theme }) => theme.fontWeights.result.subTitle};
  line-height: ${({ theme }) => theme.lineHeights.result.subTitle};
  margin: 0;
  padding: 0;
`;

const ExtraWrapper = styled.div`
  margin: 0;
  padding: 0;
  margin-top: ${({ theme }) => theme.space.result.extraMargin};
`;

export {
  ResultWrapper,
  ResultImg,
  TitleWrapper,
  SubTitleWrapper,
  ExtraWrapper,
  IconWrapper,
};