import styled from 'styled-components'

import {
  rem
} from '../../../style/function.style'

export const ListContainer = styled.div``

export const ListItem = styled.div`
  display: flex;
  margin-bottom: ${rem(43)};
  justify-content: space-between;
`

export const ListItemImageContainer = styled.span`
  position: relative;
  img {
    width: ${rem(161)};
    height: ${rem(161)};
    border-radius: ${rem(20)};
  }
  .player {
    width: ${rem(87)};
    height: ${rem(87)};
    position: absolute;
    top: 50%;
    left: 50%;
    transform: scale(0.6) translate(-50%, -50%);
    transform-origin: 0 0;
  }
  .duration {
    padding: 0 ${rem(8)};
    background: rgba(0, 0, 0, 0.2);
    border-radius: ${rem(20)};
    color: #ffffff;
    font-size: ${rem(24*0.6)};
    line-height: ${rem(34*0.6)};
    text-align: center;
    position: absolute;
    bottom: ${rem(15*0.6)};
    right: ${rem(15*0.6)};
  }
`

export const ListItemInfo = styled.div`
  width: ${rem(400)};
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
`

export const ListItemInfoTitle = styled.div<{
  maxLine: number;
}>`
  font-weight: bold;
  font-size: ${rem(28)};
  line-height: ${rem(40)};
  width: 100%;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: ${props => props.maxLine};
  overflow: hidden;
`

export const ListItemInfoUser = styled.div`
  display: flex;
  img,
  .img {
    width: ${rem(32)};
    height: ${rem(32)};
    border-radius: 50%;
    margin-right: ${rem(8)};
    background-color: #ededed;
  }
  .nickName {
    font-size: ${rem(22)};
    line-height: ${rem(31)};
    color: #b3b3b3;
    width: ${rem(200)};
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
`

export const ListItemTextContainer = styled.div`
  width: 100%;
  box-sizing: border-box;
  background: #F5F5F5;
  border-radius: ${rem(24)};
  padding: ${rem(20)} ${rem(18)};
  margin-bottom: ${rem(18)};
`

export const ListItemTextTitle = styled.div`
  font-weight: bold;
  font-size: ${rem(28)};
  line-height: ${rem(40)};
  color: #2e2e2e;
  margin-bottom: ${rem(9)};
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
`

export const ListItemTextContent = styled.div<{
  maxLine: number;
}>`
  font-size: ${rem(26)};
  line-height: ${rem(36)};
  color: #B3B3B3;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: ${props => props.maxLine};
  overflow: hidden;
`