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

export const Container = styled.div`
  width: 100%;
  padding: ${rem(40)} ${rem(40)} 0 ${rem(40)};
`

export const Title = styled.div`
  font-weight: bold;
  line-height: ${rem(44)};
  font-size: ${rem(34)};
  margin-bottom: ${rem(40)};
  .link{
    font-weight: normal;
    float: right;
    font-size: ${rem(28)};
    color: #B3B3B3;
    padding-right: ${rem(24)};
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAApUlEQVR42mNgGAUDDvazbG7fnH+GlSzNmx02/9/8f8uJnbJkaN4WDtK8+f/m19vcyNf8f/PfrfX/mcjVDHL+jv0iZGve/H/zo63m5Gv+v/nn5hzyNYPg0v/M5Gv+v7WGAs2bN1OiOY5MzVt+bykgM8C2PN9iS2Zobzm0VYLceO7dz0JeCvu0OYTMjLHl6nZ1knPVdkuw1uU7uckrDlK3eI+WqFQGABGk/MO9XoGaAAAAAElFTkSuQmCC) right center no-repeat;
    background-size: ${rem(20)} ${rem(20)};
    &:active{
      opacity: .7;
    }
  }
`

export const Question = styled.div`
  font-size: ${rem(34)};
  color: #444;
  letter-spacing: 0;
  line-height: ${rem(51)};
  font-weight: bold;
  max-height: ${rem(102)};
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
`

export const Info = styled.div`
  margin-top: ${rem(24)};
  line-height: ${rem(48)};
  font-size: ${rem(26)};
  color: #B3B3B3;
  .avatar{
    float: left;
    width: ${rem(48)};
    height: ${rem(48)};
    border-radius: ${rem(48)};
    margin-right: ${rem(16)};
  }
  .name{
    width: ${rem(386)};
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .count{
    float: right;
  }
`
export const Answer = styled.div`
  margin-top: ${rem(24)};
  margin-bottom: ${rem(40)};
  font-size: ${rem(30)};
  color: #808080;
  letter-spacing: 0;
  line-height: ${rem(48)};
  max-height: ${rem(48*3)};
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  &:active{
    opacity: .7;
  }
`
export const Divider = styled.div`
  margin-left: -${rem(40)};
  margin-right: -${rem(40)};
  height: ${rem(16)};
  background-color: #f6f6f6;
`