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

// const rem = px => (px/75).toFixed(1)
export const Container = styled.div`
  padding: ${rem(40)} 0 0 ${rem(40)};
  .title {
    font-weight: bold;
    font-size: ${rem(34)};
    color: #444444;
    line-height: ${rem(44)};
    padding-bottom: ${rem(32)};
  }
  .list-con {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    padding-right: ${rem(40)};
    padding-bottom: ${rem(40)};
    &::-webkit-scrollbar {
      display: none;
    }
    .item {
      display: inline-block;
      width: ${rem(280)};
      vertical-align: top;
      margin-right: ${rem(24)};
      position: relative;
      &::last-child {
        margin-right: 0;
      }
      .cover {
        width: ${rem(280)};
        height: ${rem(180)};
        border-radius: ${rem(8)};
        background-color: #eee;
        background-repeat: no-repeat;
        background-size: 100% auto;
      }
      .like-icon {
        font-size: ${rem(20)};
        color: #FFFFFF;
        letter-spacing: 1px;
        position: absolute;
        top: ${rem(10)};
        right: ${rem(10)};
        padding: 0 ${rem(12)};
        background: rgba(6,6,6,0.77);
        border-radius: ${rem(20)};
        .icon {
          margin-left: ${rem(4)};
          width: ${rem(20)};
        }
      }
      p {
        font-family: PingFangSC-Regular sans-serif;
        font-size: ${rem(27)};
        color: #444444;
        line-height: ${rem(40)};
        padding-top: ${rem(22)};
        width: ${rem(280)};
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        white-space: normal;
      }
    }
  }
`

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