@import '../../../assets/constants.sass'
._info-overview
  flex: none
  width: 380px
  display: flex
  flex-direction: column
  border: 1px solid $color-border
  border-radius: $border-radius
  ._info-top
    flex: none
    width: 100%
    height: 176px
    background: $color-bg-light
    padding: 40px 0 40px
    text-align: center
    ._info-avatar
      width: 60px
      height: 60px
      line-height: 60px
      text-align: center
      border-radius: 50%
      color: #fff
      font-size: 26px
      margin: 0 auto 15px auto
    ._info-uname
      font-size: $size-font-subtitle-small
      font-weight: bolder
  ._info-center
    flex: 1
    overflow: auto
    background: #fff
    padding: 0 20px
    ._info-props
      font-size: $size-font-content-medium
      li
        padding: 11px 0
        border-bottom: 1px dashed $color-border
        ._info-prop-name,._info-prop-value
          display: inline-block
        ._info-prop-name
          color: $color-brand-black
          width: 40%
          max-width: 130px
        ._info-prop-value
          width: 60%
          color: $color-font-content
    ._info-recent-events
      ._info-title
        font-size: $size-font-subtitle-small
        border-bottom: 1px dashed $color-border
        padding: 20px 0 10px 0
      ._info-empty
        font-size: $size-font-content-medium
        text-align: center
        color: $color-font-content
        height: 50px
        line-height: 50px
      ._info-recent-event
        padding: 11px 0
        border-bottom: 1px dashed $color-border
        display: flex
        flex-direction: row
        ._info-event-name
          flex: 1
          font-size: $size-font-content-medium
          color: $color-brand-black
        ._info-event-times
          flex: none
          font-size: $size-font-content-medium
          color: $color-font-content