import styled from 'styled-components'

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

export {
  rem
}

const rem1125 = (px: number) => rem(px, 1125)

export const InfoBlock = styled.div<{
  color?: string,
}>`
  margin: ${rem1125(51)} auto 0;
  width: ${rem1125(1005)};
  height: ${rem1125(119)};
  display: flex;
  align-items: center;
  font-size: ${rem1125(36)};
  color: #2E2E2E;
  background: #FBF8F2;
  position: relative;
  font-weight: 600;
  flex-shrink: 0;
  &::after{
    position: absolute;
    content: '';
    width: ${rem1125(995*2)};
    height: ${rem1125(109*2)};
    left: ${rem1125(5)};
    top: ${rem1125(5)};
    border: 1px solid #C6A270;
    pointer-events: none;
    transform: scale(0.5);
    transform-origin: 0 0;
  }
  .avatar{
    width: ${rem1125(80)};
    height: ${rem1125(80)};
    border-radius: 100%;
    margin-left: ${rem1125(55)};
    flex-shrink: 0;
  }
  .name{
    flex: 1 0 0;
    margin-left: ${rem1125(16)};
    max-width: ${rem1125(400)};
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .points{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: ${rem1125(42)};
    padding-left: ${rem1125(70)};
    padding-right: ${rem1125(13)};
    margin-left: ${rem1125(20)};
    margin-right: ${rem1125(55)};
    position: relative;
    background: #fff;
    border-radius: ${rem1125(21)};
    .icon{
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: ${rem1125(54)};
      height: ${rem1125(54)};
    }
    .count{
      color: ${props => props.color || '#C89356;'}
    }
  }
  
`

export const MissionContainer = styled.div<{
  isEdit: boolean
}>`
  #missionBtn{
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    ${
      props => props.isEdit ? `
        background: rgba(255, 0, 0, .3);
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      ` : `
        font-size: 0;
      `
    }
  }
  #awardBtn{
    position: absolute;
    left: 0;
    top: 2rem;
    width: 2rem;
    height: 2rem;
    ${
      props => props.isEdit ? `
        background: rgba(0, 255, 0, .3);
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      ` : `
        font-size: 0;
      `
    }
  }
  #points{
    position: absolute;
    left: 3rem;
    top: 0;
    width: .5rem;
    height: .5rem;
    color: #F27D50;
    font-size: ${rem(30)};
    text-align: center;
    font-family: 'Point Font',-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif;
    ${
      props => props.isEdit ? `
        background: rgba(0, 0, 255, .3);
      ` : ``
    }
  }
`

export const RuleBtn = styled.div<{
  color: string,
  safeBottom: number,
}>`
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: ${props => rem1125(26 + props.safeBottom)};
  height: ${rem1125(84)};
  font-size: ${rem1125(36)};
  color: ${props => props.color};
  display: flex;
  align-items: center;
  justify-content: center;
  .text {
    margin: 0 ${rem1125(12)};
  }
  .info-icon{
    font-size: ${rem1125(42)};
  }
  .go-icon{
    width: 1.1em;
  }
`

export const PopContent = styled.div<{
  safeBottom?: number,
}>`
  padding: 0 ${rem(60, 1125)} 0;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: ${props => rem1125(props.safeBottom || 0)};
  &.award{
    overflow-y: auto;
  }
  &::-webkit-scrollbar {
    display: none;
  }
`

export const MissionScrollTip = styled.div<{
  show: boolean,
}>`
  display: ${props => props.show ? 'flex' : 'none'};
  font-size: ${rem1125(36)};
  line-height: ${rem1125(63)};
  font-weight: bold;
  color: #A5A5A5;
  align-items: center;
  justify-content: center;
  padding-top: ${rem1125(40)};
  .icon {
    width: ${rem1125(20 * 1.2)};
    height: ${rem1125(28 * 1.2)};
    margin-left: ${rem1125(10)};
  }
`

export const Gap = styled.div`
 flex-shrink: 0;
`

export const CreateBtn = styled.button<{
  color?: string,
  safeBottom: number,
}>`
  display: block;
  width: ${rem1125(1005)};
  height: ${rem1125(144)};
  border-radius: ${rem1125(72)};
  margin: ${rem1125(40)} auto ${props => rem1125(159 + props.safeBottom)};
  flex-shrink: 0;
  line-height: ${rem1125(144)};
  color: #FFF;
  background-color: ${props => props.color ? props.color : '#C89356'};
  font-size: ${rem1125(44)};
  &:active{
    opacity: .7;
  }
`