import styled, { css } from 'styled-components';

import { Tag, PostImage } from './PostsList.style';
import { Avatar } from '../shared/Avatar.style';
import Hand from '../../../assets/img/hand.png';
import { mediaMax, mediaMin } from '../../theme/mixins';
import { Flex } from '../shared/Flex.style';

export const Author = styled.div`
  flex: 1;
  display: flex;
  align-items: center;
    
  ${mediaMax.small(css`
    margin-bottom: 30px;
  `)} 
  
  p {
    margin-bottom: 7px;
  }

  span {
    color: ${props => props.theme.default.colors.darkGrey};
  }

  ${Avatar} {
    width: 60px;
    height: 60px;
    margin-right: 25px;
  }
`;

export const EmbedContainer = styled.div`
  padding: 40px 20px;
  margin: 40px 0 60px;
  background-image: ${props => props.theme.default.gradient.blue};
  color: ${props => props.theme.default.colors.white};

  ${mediaMax.medium(css`
    text-align: center;
  `)};
  
  ${mediaMin.medium(css`
    padding: 40px;
    background-image: 
      url(${Hand}),
      ${props => props.theme.default.gradient.blue};
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: auto 80%, auto;
    
    h2 {
      padding-right: 100px;
    }  
  `)};
  
  h2 {
    margin-bottom: 25px;
  }
`;

export const RelatedEmbedContainer = styled.a`
  display: block;
  box-shadow: ${props => props.theme.default.shadow};
  border-radius: 8px;
  margin: 40px 0 60px;
  overflow: hidden;

  ${mediaMin.small(css`
    display: flex;
    align-items: center;
    
    ${PostImage} {
      min-height: 90px;
      width: 180px;
    }
  `)} 

  :hover {
    box-shadow: 0 0 16px 0 rgba(0, 30, 56, 0.2);
  }

  > div {
    padding: 15px;
    color: ${props => props.theme.default.colors.darkGrey};
  }
  
  h4 {
    margin-bottom: 0;
    color: ${props => props.theme.default.colors.black};
  }  
`;

export const PostContainer = styled.div`
  margin-bottom: 20px;
  
  ${mediaMax.small(css`
    margin: -20px;
  `)} 
  
  > div {
    background-color: ${props => props.theme.default.colors.white};
  }
  
  // image & title
  > div:first-child {
    position: relative;

    ${PostImage} {
      max-height: 450px;
      height: 50vw;
      background-size: cover;
    }
  
    .article-title {
      padding: 40px 4% 0;
    }

    h1 {
      font-size: ${props => props.theme.default.fonts.sizes[2]};
      margin-bottom: 0;
    }

    ${Tag} {
      margin-bottom: 15px;
    }
    
    ${mediaMin.small(css`
      .article-title {
        position: absolute;
        bottom: 30px;
      }
      
      h1 {
        color: ${props => props.theme.default.colors.white};
      }
      
      ${Tag} {
        background-color: ${props => props.theme.default.colors.white};
        color: ${props => props.theme.default.colors.black};
      }
    `)}
  }

  // content
  > div:last-child {
    padding: 40px 4% 60px;

    ${mediaMax.small(css`
      > ${Flex} {
        display: block;
      }
    `)} 
  }

  article {
    line-height: 1.8rem;
    font-size: 1rem;
    padding: 40px 0;
    
    p {
      margin-bottom: 30px;
    }
    
    h2,
    h3 {
      margin-bottom: 20px;
    }
  
    h2 {
      font-size: ${props => props.theme.default.fonts.sizes[3]};
      line-height: 2rem;
    }
  
    h3 {
      position: relative;
      font-size: ${props => props.theme.default.fonts.sizes[4]};
      padding-left: 15px;
      
      &:before {
        content: "•";
        position: absolute;
        left: 0;
      }
    }
  }

  ${mediaMin.small(css`
    article {
      padding: 40px 0 60px;
    }

    .edging {
      border-left: 6px solid ${props => props.theme.default.colors.blue};
      padding: 5px 0 5px 25px;
    }
  `)} 
`;