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<{
  backgroundColor: string
}>`
  width: ${rem(685)};
  margin: 0 auto;
  padding-bottom: ${rem(81)};
  background-color: ${props => props.backgroundColor};
  border-radius: ${rem(32)};
`

export const ListContainer = styled.div`
  padding: ${rem(18)} ${rem(45)} 0;
`

export const ListItem = styled.div`
  padding-top: ${rem(18)};
`

export const ListItemDescImg = styled.img<{
  height?: number
}>`
  height: ${props => props.height ? `${props.height}rem` : rem(100)};
  margin: 0 auto ${rem(39)} auto;
  display: block;
`

export const LoadingContainerTheme1 = styled.div`
  .item {
    display: flex;
    margin-bottom: ${rem(43)};
    justify-content: space-between;
    .img {
      width: ${rem(161)};
      height: ${rem(161)};
      border-radius: ${rem(20)};
      background-color: #ededed;
    }
    .info {
      width: ${rem(400)};
      display: inline-flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        background-color: #ededed;
        width: 100%;
        height: ${rem(40)};
      }
      .user {
        display: flex;
        .avatar {
          width: ${rem(32)};
          height: ${rem(32)};
          border-radius: 50%;
          margin-right: ${rem(8)};
          background-color: #ededed;
        }
        .nickName {
          width: ${rem(200)};
          height: ${rem(31)};
          background-color: #ededed;
        }
      }
    }
  }
`

export const LoadingContainerTheme2 = styled.div`
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    display: inline-block;
    width: ${rem(269)};
    margin-bottom: ${rem(47)};
    .img {
      width: ${rem(269)};
      height: ${rem(269)};
      border-radius: ${rem(24)};
      background-color: #ededed;
    }
    .info {
      width: 100%;
      .title {
        background-color: #ededed;
        height: ${rem(40)};
      }
      .user {
        display: flex;
        padding: ${rem(18)} 0 ${rem(11)} 0;
        box-sizing: content-box;
        min-height: ${rem(32)};
        .avatar {
          width: ${rem(32)};
          height: ${rem(32)};
          border-radius: 50%;
          margin-right: ${rem(8)};
          background-color: #ededed;
        }
        .nickName {
          width: 100%;
          height: ${rem(31)};
          background-color: #ededed;
        }
      }
    }
  }
`