import styled from 'styled-components'

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

export const ListContainer = styled.div`
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
`

export const ListItem = styled.div`
  display: inline-block;
  width: ${rem(269)};
  margin-bottom: ${rem(47)};
`

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

export const ListItemInfo = styled.div`
  width: 100%;
`

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;
  padding: ${rem(18)} 0 ${rem(11)} 0;
  box-sizing: content-box;
  min-height: ${rem(32)};
  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: 100%;
    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: ${rem(269)};
  box-sizing: border-box;
  background: #F5F5F5;
  border-radius: ${rem(24)};
  padding: ${rem(20)} ${rem(13)};
`

export const ListItemTextTitle = styled.div`
  font-weight: bold;
  font-size: ${rem(28)};
  line-height: ${rem(39)};
  color: #2e2e2e;
  margin-bottom: ${rem(8)};
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  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;
`