import styled from 'styled-components'
import '../style/common.css'
import {rem} from '../style/function.style'

export const Container = styled.div`
  padding: ${rem(40)} ${rem(40)} 0 ${rem(40)};
  h1 {
    font-family: PingFangSC-Medium sans-serif;
    font-weight: 500;
    font-size: ${rem(34)};
    color: #444444;
    line-height: ${rem(44)};
    position: relative;
    padding-bottom: ${rem(32)};
    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      border-bottom: 1px solid #ECECEC;
      transform: scale(0.5);
      transform-origin: 0 0;
    }
  }
  .banner {
    width: 100%;
    height: ${rem(285)};
    border-radius: ${rem(8)};
  }
  .topic {
    .topic__title {
      padding-top: ${rem(30)};
      font-family: PingFangSC-Medium sans-serif;
      font-weight: 500;
      font-size: ${rem(44)};
      color: #444444;
      letter-spacing: 0;
      line-height: ${rem(58)};
    }
    .topic__info {
      padding-top: ${rem(30)};
      .data {
        font-family: PingFangSC-Regular sans-serif;
        font-size: ${rem(24)};
        color: #444444;
      }
      .right {
        margin-left: ${rem(37)};
      }
    }
    .topic__vote {
      margin-top: ${rem(40)};
      .options {
        display: inline-block;
        display: flex;
        justify-content: space-between;
        .item-2 {
          width: ${rem(280)};
          text-align: center;
        }
        .item {
          width: ${rem(210)};
          text-align: center;
        }
        .box-text {
          display: inline-block;
          width: 100%;
          height: ${rem(124)};
          line-height: ${rem(124)};
          background: #FFFFFF;
          border: 1px solid #EDEDED;
          border-radius: ${rem(8)};
          font-family: PingFangSC-Regular sans-serif;
          font-size: ${rem(28)};
          color: #444444;
          text-align: center;
          position: relative;
          .icon {
            position: absolute;
            top: ${rem(12)};
            right: ${rem(12)};
            width: ${rem(33)};
            height: ${rem(33)};
          }
        }
        .checked-0 {
          background: #5F7CCC;
          color: #FFFFFF;
        }
        .checked-1 {
          background: #F57979;
          color: #FFFFFF;
        }
        .checked-2 {
          background: #FFDA8F;
          color: #FFFFFF;
        }
        .vote-users {
          margin-top: ${rem(32)};
          height: ${rem(40)};
          .avatar {
            display: inline-block;
            margin-right: ${rem(7)};
            img {
              width: ${rem(40)};
              height: ${rem(40)};
              border-radius: 50%;
            }
            span {
              display: inline-block;
              width: ${rem(40)};
              height: ${rem(40)};
              border-radius: 50%;
              border: 1px dashed #cccccc;
            }
            &:last-child {
              margin: 0;
            }
          }
        }
        .count {
          display: block;
          margin-top: ${rem(16)};
          font-family: PingFangSC-Regular sans-serif;
          font-size: ${rem(24)};
          color: #CCCCCC;
          text-align: center;
        }
      }
      .percent {
        width: 100%;
        height: ${rem(34)};
        opacity: 0.8;
        font-family: PingFangSC-Regular sans-serif;
        font-size: ${rem(24)};
        color: #FFFFFF;
        letter-spacing: ${rem(5)};
        text-align: center;
        line-height: ${rem(34)};
        border-radius: ${rem(17)};
        margin-top: ${rem(40)};
        background-image: linear-gradient(to right, #5F7CCC 0%, #F57979 33%, #FFDA8F  90%);
      }
      .percent-select {
        width: 100%;
        height: ${rem(34)};
        opacity: 0.8;
        font-family: PingFangSC-Regular sans-serif;
        font-size: ${rem(24)};
        color: #FFFFFF;
        text-align: center;
        line-height: ${rem(34)};
        border-radius: ${rem(17)};
        margin-top: ${rem(40)};
        overflow: hidden;
        .percent-item {
          height: ${rem(34)};
          vertical-align: middle;
        }
        .checked-0 {
          background: #5F7CCC;
          color: #FFFFFF;
          border-top-left-radius:  ${rem(17)};
          border-bottom-left-radius:  ${rem(17)};
        }
        .checked-1 {
          background: #F57979;
          color: #FFFFFF;
        }
        .checked-2 {
          background: #FFDA8F;
          color: #FFFFFF;
        }
        .last {
          border-top-right-radius:  ${rem(17)};
          border-bottom-right-radius:  ${rem(17)};
        }
      }
    }
    .topic-desc {
      padding-top: ${rem(24)};
      font-family: HYQiHei-EZS sans-serif;
      font-size: ${rem(28)};
      color: #808080;
      letter-spacing: 0;
      line-height: ${rem(48)};
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
`
export const Divider = styled.div`
  margin-left: -${rem(40)};
  margin-right: -${rem(40)};
  margin-top: ${rem(40)};
  height: ${rem(16)};
  background-color: #f6f6f6;
`