@import '../../../assets/constants.sass'
._user-info-sessions
  flex: 1
  margin-left: 20px
  display: flex
  flex-direction: column
  background: #fff
  border: 1px solid $color-border
  border-radius: $border-radius
  ._sessions-top
    flex: none
    text-align: right
    padding: 20px
    position: relative
    ._sessions-event-selector .event-selector
      text-align: left
    ._sessions-chart
      height: 100px
      margin-top: 10px
      position: relative
      ._to-chart
        height: 100%
      ._sessions-chart-empty
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100px
        line-height: 100px
        background: #fff
        color: $color-font-content
        text-align: center
        font-size: $size-font-content-small
  ._sessions-main-panel
    flex: 1
    display: flex
    flex-direction: column
    font-size: $size-font-content-small
    overflow: hidden
    ._session-empty
      height: 100%
      text-align: center
      color: $color-font-content
      margin-top: 20px
    ._sessions-title-bar
      flex: none
      height: 33px
      line-height: 33px
      color: $color-font-title
      background: $color-bg-light
      padding: 0 20px
      ._sessions-date
      ._sessions-times
        float: right
        span
          color: #0ea1eb
    ._sessions-list
      flex: 1
      overflow: auto
      ._sessions-break
        border-bottom: 2px solid $color-border
        position: relative
        top: -1px
      ._sessions-event
        & ._session-event-highlight
          background: $color-status-normal-light
        ._sessions-event-overview
          padding: 0 20px
          height: 40px
          line-height: 40px
          border-bottom: 1px dashed $color-border
          &:hover
            background: $color-status-normal-light
          ._event-time
            margin-right: 10px
            display: inline-block
            width: 145px
            color: $color-font-content
          ._event-icon-circle
            margin-right: 20px
            display: inline-block
            width: 8px
            height: 8px
            border-radius: 50%
            border: 2px solid
          ._event-name
            color: $color-font-content
          ._session-plat
            margin-left: 20px
            line-height: 20px
            border-radius: $border-radius
            background: $color-brand
            color: #fff
            display: inline-block
            text-align: center
            padding: 2px 6px
          ._event-expand
            float: right
            visibility: hidden
          &:hover
            cursor: pointer
            ._event-expand
              visibility: visible
        ._sessions-event-detail
          width: 100%
          border-collapse: collapse
          background: $color-bg-light
          ._sessions-prop-break
            border-top: 1px solid $color-border
            position: relative
            top: -1px
          ._sessions-event-prop
            display: inline-block
            width: 50%
            word-break: break-all
            line-height: 32px
            padding: 0 20px
            border-bottom: 1px dashed $color-border
            border-collapse: collapse
            color: #666
            overflow: hidden
            span
              font-weight: bold
            ._sessions-epro
        & ._session-event-expand ._event-expand
          visibility: visible
          transform: rotate(90deg)