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)};
  overflow: hidden;
`

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,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAApUlEQVR42mNgGAUDDvazbG7fnH+GlSzNmx02/9/8f8uJnbJkaN4WDtK8+f/m19vcyNf8f/PfrfX/mcjVDHL+jv0iZGve/H/zo63m5Gv+v/nn5hzyNYPg0v/M5Gv+v7WGAs2bN1OiOY5MzVt+bykgM8C2PN9iS2Zobzm0VYLceO7dz0JeCvu0OYTMjLHl6nZ1knPVdkuw1uU7uckrDlK3eI+WqFQGABGk/MO9XoGaAAAAAElFTkSuQmCC) right center no-repeat;
    background-size: ${rem(20)} ${rem(20)};
    &:active{
      opacity: .7;
    }
  }
`

export const SingleBook = styled.div`
  margin-top: ${rem(32)};
  margin-bottom: ${rem(40)};
  &::after{
    content: '';
    display: table;
    clear: both;
  }
  &:active{
    opacity: .7;
  }
  .cover{
    float: left;
    width: ${rem(176)};
    height: ${rem(246)};
    margin-right: ${rem(30)};
    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{
    font-weight: bold;
    font-size: ${rem(32)};
    color: #444444;
    line-height: ${rem(48)};
    max-height: ${rem(96)};
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .author{
    margin-top: ${rem(16)};
    font-size: ${rem(26)};
    color: #B3B3B3;
    line-height: ${rem(37)};
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .discount{
    height: ${rem(40)};
    line-height: ${rem(40)};
    margin-top: ${rem(16)};
    font-size: ${rem(24)};
    color: #B3B3B3;
    .current{
      font-size: ${rem(28)};
      color: #CE5959;
      margin-right: ${rem(16)};
    }
    .origin{
      text-decoration: line-through;
    }
  }
  .desc{
    margin-top: ${rem(18)};
    font-size: ${rem(26)};
    color: #B3B3B3;
    line-height: ${rem(39)};
    max-height: ${rem(117)};
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
`
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;
`