import styled from 'styled-components'
import {rem} from '../style/function.style'

export const Container = styled.div`
  width: 100%;
  padding: ${rem(40)} ${rem(40)} 0 ${rem(40)};
  /* margin-bottom: ${rem(40)}; */
`

export const Title = styled.div`
  font-weight: bold;
  line-height: ${rem(44)};
  font-size: ${rem(34)};
  .link{
    font-weight: normal;
    float: right;
    font-size: ${rem(28)};
    color: #B3B3B3;
    padding-right: ${rem(24)};
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAB0klEQVR42sVVvS8EURBfHw0KjUSnOUJFIRRyrlLIHc1ZKhofx3UaJCJuCddoJYdeL5nf3BLiOgXr/glRqa5SuNzKjt11t3feykXiTTfzfjO/+XjzNO3vj9XJMV6lbexgmWMPHb+E2S0UB/BO9rfgHaC43RICxSgVq2E18piP1AEKPXSJfYGmqOxefKUc6WbUjCLJWc8hSrwQjLbpGPIRXkdFLj1jIkjRHIPlOjiuMZAhynMHig/OFNobJVRoxwE+xIFeB3ZFV1YkKQFKNNAAzNmwXuBIWFp+Wj74DWmkeNpuVTSyFQWBJ1wFZ2pbgrQqNsXlDjwqUwHwonKI2vDijM1Nl9eIQZ7xxBwOy/srzev+pub+tptOeUv7/4NdylmdzeXQJwOyF1qokfysJ+ag//Dl9RbVUF4KNHTKo82iGFemlq4Fc8YzJMTXvXoweRop3qA3F274qwdPDd5qI/JZP7bhK6/7USIbFSSVJdOriBvVOc2LqozDn5YBGc4yQAUXdWBNw7FbR8scC25UTNCz2CpI3QxJwYIDinmHvEiRszyHSTNKOs7o1dWWaU1cneDqrreOXD5Cjz+u3iJGm1v6jETo0q/+brCMHdrGCseanHv1+QSOBdeZbsjcogAAAABJRU5ErkJggg==) right center no-repeat;
    background-size: ${rem(20)} ${rem(20)};
    &:active{
      opacity: .7;
    }
  }
`

export const ListBook = styled.div`
  margin-top: ${rem(34)};
  overflow: hidden;
`
export const ItemBook = styled.div`
  width: ${rem(176)};
  float: left;
  margin-right: ${rem(71)};
  margin-bottom: ${rem(34)};
  height: ${rem(352)};
  &:active{
    opacity: .7;
  }
  &.num-3th{
    margin-right: 0;
  }
  .cover{
    display: block;
    width: 100%;
    height: ${rem(246)};
    box-shadow: 0 ${rem(10)} ${rem(14)} 0 rgba(0,0,0,0.09), 0 ${rem(4)} ${rem(4)} 0 rgba(0,0,0,0.02);
  }
  .title{
    margin-top: ${rem(22)};
    font-size: ${rem(26)};
    color: #444;
    line-height: ${rem(39)};
    max-height: ${rem(78)};
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
`

export const Divider = styled.div`
  margin-left: -${rem(40)};
  margin-right: -${rem(40)};
  height: ${rem(16)};
  background-color: #f6f6f6;
`