import styled from 'styled-components';
import {
  rem,
} from '../../style/function.style';

export const MissionTitle = styled.div<{
  image?: string,
}>`
  flex-shrink: 0;
  margin-top: ${rem(-81, 1125)};
  height: ${rem(159, 1125)};
  ${
    props => `background-image: url(${props.image});`
  }
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
`

export const MissionList = styled.ul`
  padding: ${rem(53)} ${rem(4)} ${rem(60)} 0;
`

export const MissionItem = styled.li<{
  color?: string,
}>`
  display: flex;
  width: 100%;
  min-height: ${rem(80)};
  align-items: center;
  margin-bottom: ${rem(46)};
  .name{
    font-size: ${rem(28)};
    line-height: ${rem(36)};
    color: #2E2E2E;
    width: ${rem(248)};
    word-break: break-all;
    font-weight: 500;
    .highlight{
      color: ${props => props.color ? props.color : '#AF925D'};
      white-space: nowrap;
    }
  }
  .info{
    position: relative;
    margin-left: ${rem(46)};
    flex: 1;
    font-size: ${rem(36, 1125)};
    color: #B3B3B3;;
    line-height: ${rem(23)};
    display: flex;
    align-items: center;
    font-weight: 600;
    .icon{
      margin-left: ${rem(7, 1125)};
      display: block;
      width: ${rem(50, 1125)};
      height: auto;
      max-height: ${rem(50, 1125)};
    }
    .unit{
      display: inline-block;
      margin-left: ${rem(40)};
      vertical-align: middle;
      line-height: 1.12;
      max-width: 5em;
      white-space: nowrap;
      overflow: hidden;
    }
    .count{
      display: inline-block;
      color: ${props => props.color ? props.color : '#AF925D'};;
      margin-left: ${rem(4)};
      line-height: 1.12;
      width: ${rem(30)};
      white-space: nowrap;
      flex: 1 0 0;
      .count-icon{
        vertical-align: middle;
        font-size: ${rem(10)};
      }
    }
  }
  .action{
    margin-left: auto;
    flex-shrink: 0;
    width: ${rem(201, 1125)};
    height: ${rem(84, 1125)};
    border-radius: ${rem(54, 1125)};
    background: ${props => props.color ? props.color : '#AF925D'};
    line-height: ${rem(84, 1125)};
    text-align: center;
    color: #FFFFFF;
    font-weight: 600;
    font-size: ${rem(24)};
    overflow: hidden;
    transform: translate3d(0,0,0);
    &.already{
      opacity: .5;
    }
    &.disable{
      background: #EAEAEA;
      color: #C7C7C7;
    }
  }
`

export const MissionDescContainer = styled.div<{
  color?: string,
}>`
  width: ${rem(638)};
  margin: ${rem(40)} auto 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0.99%, #FFFFFF 46.08%, rgba(255, 255, 255, 0) 102.07%);
  height: ${rem(40)};
  line-height: ${rem(40)};
  text-align: center;
  font-size: ${rem(24)};
  color: #B3B3B3;
  position: relative;
  .points{
    position: absolute;
    top: 0;
    right: 0;
    min-width: ${rem(109)};
    height: ${rem(40)};
    line-height: ${rem(40)};
    padding: 0 ${rem(6)};
    background-color: #fff;
    font-size: ${rem(24)};
    color: ${props => props.color ? props.color : '#AF925D'};
    text-indent: ${rem(30)};
    font-weight: 600;
    border-radius: ${rem(28)};
    .icon{
      position: absolute;
      display: block;
      transform: translate(-${rem(10)}, -50%);
      top: 50%;
      left: 0;
      width: ${rem(48)};
      height: auto;
    }
  }
`
export const MissionPoints = styled.div<{
  color?: string,
}>`
  width: ${rem(668)};
  margin: ${rem(24)} auto 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0.99%, #FFFFFF 46.08%, rgba(255, 255, 255, 0) 102.07%);
  height: ${rem(40)};
  line-height: ${rem(40)};
  text-align: center;
  font-size: ${rem(24)};
  color: ${props => props.color ? props.color : '#D1B37E'};
`