import styled from 'styled-components'

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

export const EmptyContainer = styled.div`
  height: ${rem(294, 1125)};
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: ${rem(39, 1125)};
  line-height: ${rem(55, 1125)};
  text-align: center;
  color: #999999;
`

export const MockingBox = styled.div`
position: absolute;
right: 0;
top: 0;
border: 1px solid #14C4BC;
padding: ${rem(4)} ${rem(8)};
color: #2e2e2e;
z-index: 4;
background: rgba(255, 255, 255, 0.4);
`

export const RankItemHeader = styled.div<{
  textColor: string
}>`
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
height: ${rem(72)};
font-weight: 600;
font-size: ${rem(38, 1125)};
line-height: ${rem(53, 1125)};
${({
  textColor
}) => (
  `color: ${textColor};`
)}
`
export const RankItemHeaderTop = styled.div`
  flex: 0 0 auto;
  width: ${rem(104)};
  text-align: center;
`
export const RankItemHeaderContent = styled.div`
  width: 100%;
  flex: 1 1 auto;
  margin-left: ${rem(25, 1125)};
`
export const RankItemHeaderScore = styled.div`
  flex: 0 0 auto;
  box-sizing: border-box;
  width: ${rem(187, 1125)};
  text-align: center;
  padding-right: ${rem(47, 1125)};
`

export const RankItem = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  height: ${rem(72)};

  &.with-button {
    height: ${rem(84)};
  }

  & + & {
    margin-top: ${rem(85, 1125)};
  }
`

export const RankItemTop = styled.div`
  flex: 0 0 auto;
  width: ${rem(104)};
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  .rank-item-icon {
    display: block;
    width: ${rem(52, 1125)};
    height: ${rem(36, 1125)}
  }

  span {
    font-weight: 500;
    font-size: ${rem(49, 1125)};
    line-height: ${rem(64, 1125)};
    color: #1F1F1F;
    font-style: italic;
  }
`
export const RankItemAvatar = styled.a`
  flex: 0 0 auto;
  display: block;
  margin: 0 ${rem(25, 1125)};
  width: ${rem(108, 1125)};
  height: ${rem(108, 1125)};
  border-radius: ${rem(125, 1125)};
  overflow: hidden;

  img {
    display: block;
    width: 100%;
    height: 100%;
  }

  &.with-button {
    width: ${rem(125, 1125)};
    height: ${rem(125, 1125)};
  }
`
export const RankItemNickName = styled.div`
  flex: 1 1 auto;
  font-weight: 500;
  font-size: ${rem(44, 1124)};
  padding-right: ${rem(54, 1124)};
  line-height: ${rem(62, 1125)};
  color: #1F1F1F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  a {
    color: #1F1F1F;
  }
`
export const RankItemScore = styled.div`
  flex: 0 0 auto;
  font-size: ${rem(36, 1125)};
  line-height: ${rem(50, 1125)};
  color: #999999;
`

export const RankItemScoreColumn = styled.div`
  width: ${rem(187, 1125)};
  box-sizing: border-box;
  flex: 0 0 auto;
  font-weight: 500;
  font-size: ${rem(44, 1125)};;
  line-height: ${rem(53, 1125)};
  padding-right: ${rem(47, 1125)};
  color: #1F1F1F;
  text-align: center;
`

export const RankItemContentBox = styled.div`
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
`
export const RankItemButton = styled.div`
  flex: 0 0 auto;
  width: ${rem(192,1125)};
  height: ${rem(74, 1125)};
  border-radius: ${rem(45, 1125)};
  margin-right: ${rem(47, 1125)};
  background: #06EADD;
  color: #fff;
  font-weight: 500;
  font-size: ${rem(38, 1125)};
  line-height: ${rem(74, 1125)};
  letter-spacing: ${rem(2, 1125)};
  text-align: center;

  .disabled {
    background: #F5F5F5;
    color: #CDCDCD;
  }
`

export const ExpendMore = styled.div`
  margin-top: ${rem(67, 1125)};
  font-weight: 500;
  font-size: ${rem(39, 1125)};
  line-height: ${rem(55, 1125)};
  text-align: center;
  color: #4DECE3;

  span {
    display: inline-block;
    vertical-align: middle;
  }
  svg {
    margin-left: ${rem(6)};
    display: inline-block;
    vertical-align: middle;
    width: ${rem(32, 1125)};
    height: ${rem(23, 1125)};
  }
`;
export const HideMore = styled.div`
  margin-top: ${rem(67, 1125)};
  font-weight: 500;
  font-size: ${rem(39, 1125)};
  line-height: ${rem(55, 1125)};
  text-align: center;
  color: #4DECE3;

  span {
    display: inline-block;
    vertical-align: middle;
  }
  svg {
    margin-left: ${rem(6)};
    display: inline-block;
    vertical-align: middle;
    width: ${rem(32, 1125)};
    height: ${rem(23, 1125)};
    transform: rotate(180deg);
  }
`;