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

export const AwardList = styled.ul`
  margin: ${rem(60)} 0 ${rem(20)};
`

export const AwardItem = styled.li<{
  color?: string,
}>`
  display: flex;
  width: 100%;
  min-height: ${rem(80)};
  align-items: center;
  margin-bottom: ${rem(46)};
  .image{
    width: ${rem(168, 1125)};
    height: ${rem(168, 1125)};
    border-radius: ${rem(32, 1125)};
    background: #FFF7EA;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      display: block;
      max-width: ${rem(156, 1125)};
      max-height: ${rem(156, 1125)};
    }
  }
  .text{
    margin-left: ${rem(16)};
    width: ${rem(230)};
    .name{
      font-size: ${rem(28)};
      line-height: ${rem(36)};
      color: #2E2E2E;
      font-weight: 500;
    }
    .description{
      font-size: ${rem(24)};
      line-height: ${rem(34)};
      color: #B3B3B3;;
      word-break: break-all;
    }
  }
  
  .info{
    position: relative;
    margin-left: ${rem(48)};
    flex: 1 0 0;
    /* background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) -10.16%, #FFFFFF 37.89%, rgba(255, 255, 255, 0.12) 83.98%); */
    font-size: ${rem(24)};
    font-weight: 600;
    color: ${props => props.color ? props.color : '#AF925D'};
    line-height: ${rem(34)};
    display: flex;
    align-items: center;
    .icon{
      position: absolute;
      display: block;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 0;
      width: ${rem(50, 1125)};
      height: auto;
    }
    .count{
      display: inline-block;
      margin-left: ${rem(32, 1125)};
      line-height: 1.12;
      width: ${rem(30)};
      white-space: nowrap;
      flex: 1 0 0;
      .count-icon{
        font-size: ${rem(14)};
        margin-right: ${rem(4)};
      }
    }
  }
  .action{
    float: right;
    font-size: ${rem(24)};
    width: ${rem(156, 1125)};
    height: ${rem(84, 1125)};
    border-radius: ${rem(54, 1125)};
    background: ${props => props.color ? props.color : '#D1B37E'};
    line-height: ${rem(84, 1125)};
    text-align: center;
    color: #FFFFFF;
    font-weight: 600;
    overflow: hidden;
    &.already{
      opacity: .5;
    }
    &.disable{
      background: #EAEAEA;
      color: #C7C7C7;
    }
  }
`