import styled from 'styled-components'

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


export const EmptyContainer = styled.div`
  min-height: ${rem(80)};
  display: flex;
  justify-content: center;
  align-items: center;
`

export const Container = styled.div`
  margin: 0 auto;
 // background-color:#FFFFFF;
`

export const ListContainer = styled.div`
  &.type-3{
    height:${rem(230)};
    max-width:${rem(450)}
    position: relative;
  }
`

export const ListItem = styled.div`
&.type-1 {
  width:${rem(325)};
  height:${rem(454)};
  display: inline-block;
  margin-left:${rem(33)};
  margin-bottom:${rem(40)};
  position:relative;
  background-color:#FFFFFF;
  border-radius: ${rem(24)};
}
&.type-2 {
  width:${rem(680)};
  height:${rem(351)};
  display: inline-block;
  margin-left:${rem(33)};
  margin-bottom:${rem(40)};
  position:relative;
  background-color:#FFFFFF;
  border-radius:${rem(24)};
}
&.type-3{
  display: flex;
  justify-content: center;
  align-items: center;
}
`

export const ListItemDescImg = styled.img`
&.type-1 {
  height: ${rem(308)};
  display: inline-block;
  overflow:hidden;
  width:${rem(335)};
  border-radius:${rem(24)};
}
&.type-2 {
  height: ${rem(308)};
  display: inline-block;
  overflow:hidden;
  width:${rem(325)};
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius:${rem(24)};
  margin-top:${rem(20)};
  margin-left:${rem(20)}
}
&.type-3 {
  height: ${rem(170)};
  display: inline-block;
  overflow:hidden;
  width:${rem(170)};
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius:${rem(24)};
}
`
export const Icon = styled.img`
&.type-1 {
  width:${rem(90)};
  height:${rem(90)};
  position:absolute;
  left:${rem(110)};
  top:${rem(120)}
}
&.type-2 {
  width:${rem(90)};
  height:${rem(90)};
  position:absolute;
  left:${rem(135)};
  top:${rem(125)}
}
&.type-3 {
  width:${rem(50)};
  height:${rem(50)};
  position:absolute;
  left:${rem(110)};
  top:${rem(110)
}
`
export const LiveTime = styled.span`
&.type-1 {
  width:${rem(280)};
  height:${rem(35)};
  position:absolute;
  top:${rem(260)};
  left:${rem(25)};
  background: rgba(0, 0, 0, 0.3);
  border-radius: 19.5px;
  text-align:center;
  color:#ECECEC;
  font-size: ${rem(20)};
}
&.type-2 {
  width:${rem(280)};
  height:${rem(35)};
  position:absolute;
  left:${rem(30)};
  top:${rem(260)};
  background: rgba(0, 0, 0, 0.3);
  border-radius: 19.5px;
  text-align:center;
  color:#ECECEC;
  font-size: ${rem(22)};
}
&.type-3 {
  display:none
}
`

export const LiveInfo = styled.div<{
  titleColor:string 
}>`
color: ${props=> props.titleColor};
&.type-1 {
    margin-bottom: ${rem(15)};
    margin-top: ${rem(25)};
    font-size: ${rem(28)};
    font-weight: bold;
    margin-left: ${rem(30)}
}
&.title-1{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
&.type-2 {
  float: right;
  margin-top: ${rem(42)};
  font-size: ${rem(36)};
  font-weight: bold;
  margin-right: ${rem(28)};
  width:${rem(285)};
  color:#2E2E2E;
  line-height:${rem(40)}
}
&.title-2{
  max-height:${rem(52)};
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
&.type-3 {
  margin-bottom: ${rem(15)};
  margin-top: ${rem(25)};
  font-size: ${rem(28)};
  font-weight: bold;
  margin-left: ${rem(20)}
}
&.title-3{
  max-height:${rem(52)};
  max-width:${rem(240)};
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color: ${props=> props.titleColor};
}
`
export const UserImg = styled.img`
&.type-1 {
  width:${rem(29)};
  height:${rem(29)};
  border-radius:${rem(29)};
  display:inline-block;
  margin-left:${rem(30)};
  margin-right:${rem(10)};
}
&.type-2 {
  width:${rem(32)};
  height:${rem(32)};
  border-radius:${rem(42)};
  margin-right:${rem(10)};
  position:relative
}
&.type-3 {
  width:${rem(36)};
  height:${rem(36)};
  border-radius:${rem(42)};
  margin-right:${rem(10)};
  position:relative
}
`
export const UserNickName = styled.span<{
  nickNameColor:string
}>`
color:${props=>props.nickNameColor};
&.type-1 {
  font-size:${rem(22)};
  line-height:${rem(30)};
  height:${rem(30)};
  text-overflow:ellipsis; 
  white-space:nowrap;
  vertical-align: middle;
  width:${rem(100)};
  overflow:hidden;
  display:inline-block;
  margin-right: ${rem(15)}
}
&.type-2 {
  max-width:${rem(200)};
  font-size:${rem(24)};
  text-overflow:ellipsis; 
  white-space:nowrap;
  overflow:hidden;
  height:${rem(32)};
  line-height:${rem(32)};
  display:inline-block;
  vertical-align: middle;
}
&.type-3 {
  max-width:${rem(210)};
  font-size:${rem(22)};
  text-overflow:ellipsis; 
  white-space:nowrap;
  overflow:hidden;
  height:${rem(32)};
  line-height:${rem(32)};
  display:inline-block;
  vertical-align: middle;
  padding-right:${rem(15)}
}
`
export const Description = styled.div<{
  descriptionColor: string;
}>`
&.type-2{
  height: ${rem(70)};
  margin-bottom: ${rem(27)};
  margin-top: ${rem(14)};
  font-size:${rem(22)};
  text-overflow:ellipsis; 
  overflow:hidden;
  color: ${props=> props.descriptionColor};
  -webkit-line-clamp: 2;
}
  &.type-3{
    height: ${rem(70)};
    margin-bottom: ${rem(27)};
    margin-top: ${rem(14)};
    max-width:${rem(310)};
    font-size:${rem(22)};
    text-overflow:ellipsis; 
    overflow:hidden;
    color: ${props=> props.descriptionColor};
    -webkit-line-clamp: 2; 
  }
`
export const LiveStatus = styled.div<{
  color: string;
  background:string
}>`
&.type-1 {
  height:${rem(42)};
  width:${rem(120)};
  font-size:${rem(24)};
  line-height:${rem(42)};
  background:${props => props.background};
  color:${props => props.color};
  display:inline-block;
  border-radius: ${rem(34)};
  text-align:center
}
&.type-2 {
  height:${rem(68)};
  width:${rem(228)};
  font-size:${rem(28)};
  line-height:${rem(68)};
  background:${props => props.background};
  color:${props => props.color};
  align-items:center;
  border-radius: ${rem(34)};
  text-align:center;
  float:bottom;
  margin-top: ${rem(25)};
}
`;
export const LiveStatusOther =
styled.span<{
  color: string;
  background:string
  }>`
  &.type-3 {
    height:${rem(62)};
    width:${rem(150)};
    font-size:${rem(18)};
    line-height:${rem(68)};
    background:${props => props.background};
    color:${props => props.color};
    align-items:center;
    border-radius: ${rem(34)};
    text-align:center;
    padding:${rem(5)} ${rem(12)};
    margin-left:${rem(20)}
  }
`