articleNavBgColor = #353535
articleCount = #999

.ArticleNavigator
  background-color articleNavBgColor
  absolute top bottom left
  width 200px
  border-right 1px solid borderColor
  color white
  user-select none
  .userInfo
    height 60px
    display block
    box-sizing content-box
    border-bottom 1px solid borderColor
    .userProfileName
      color brandColor
      font-size 28px
      padding 6px 37px 0 10px
      white-space nowrap
      text-overflow ellipsis
      overflow hidden
    .userName
      color white
      padding-left 20px
      margin-top 3px
    .tutorial
      position fixed
      z-index 35
      top 0
      left 0
      pointer-event none
      font-style italic
      transition 0.1s
      &.hide
        opacity 0
    .settingBtn
      width 22px
      height 22px
      line-height 22px
      border-radius 11px
      position absolute
      top 19px
      right 14px
      color white
      padding 0
      background-color transparent
      border 1px solid white
      z-index 31
      .tooltip
        tooltip()
        margin-top -5px
        margin-left 10px
      &:hover
        .tooltip
          opacity 1
      &:active
        background-color brandColor
        border-color brandColor
  .ArticleNavigator-unsaved
    position absolute
    top 100px
    width 100%
    height 225px
    transition opacity 0.2s ease-in-out
    &.hide
      opacity 0.2
    .ArticleNavigator-unsaved-header
      border-bottom 1px solid alpha(borderColor, 0.5)
      padding-bottom 5px
      clearfix()
      position relative
      padding-left 10px
      font-size 18px
      line-height 22px
    .ArticleNavigator-unsaved-list
      height 165px
      padding 5px 0
      overflow-y scroll
      .ArticleNavigator-unsaved-list-item
        height 33px
        padding-left 15px
        clearfix()
        transition 0.1s
        cursor pointer
        overflow hidden
        &:hover
          background-color alpha(white, 0.05)
        &.active, &:active
          background-color alpha(lighten(brandColor, 25%), 70%)
        .ArticleNavigator-unsaved-list-item-label
          float left
          width 151px
          line-height 33px
          overflow ellipsis
        .ArticleNavigator-unsaved-list-item-label-untitled
          color inactiveTextColor
        .ArticleNavigator-unsaved-list-item-discard-button
          float right
          width 33px
          line-height 30px
          height 33px
          border none
          background-color transparent
          color white
          font-size 18px
          opacity 0.5
          &:hover
            opacity 1
      .ArticleNavigator-unsaved-list-empty
        height 33px
        padding-left 15px
        color alpha(white, 0.4)
        transition 0.1s
        line-height 33px
        &:hover
          color alpha(white, 0.6)
    .ArticleNavigator-unsaved-control
      absolute bottom
      height 33px
      border-top 1px solid alpha(borderColor, 0.5)
      width 100%
      .ArticleNavigator-unsaved-control-save-all-button
        border none
        background-color transparent
        font-size 14px
        color brandColor
        padding-left 15px
        width 100%
        height 33px
        text-align left
        &:hover
          color lighten(brandColor, 15%)
          background-color alpha(white, 0.05)
        &:active
          color white
        &:disabled
          color alpha(brandColor, 0.5)
          &:hover
            color alpha(lighten(brandColor, 25%), 0.5)
            background-color transparent


  .ArticleNavigator-folders
    absolute bottom
    top 365px
    width 100%
    transition top 0.15s ease-in-out
    background-color articleNavBgColor
    .tutorial
      position fixed
      z-index 35
      font-style italic
    &.expand
      top 100px
    .ArticleNavigator-folders-header
      border-bottom 1px solid alpha(borderColor, 0.5)
      padding-bottom 5px
      clearfix()
      position relative
      z-index 30
      .title
        float left
        padding-left 10px
        font-size 18px
        line-height 22px
      .addBtn
        float right
        margin-right 15px
        width 22px
        height 22px
        font-size 10px
        padding 0
        line-height 22px
        border 1px solid white
        border-radius 11px
        background-color transparent
        color white
        padding 0
        font-weight bold
        .tooltip
          tooltip()
          margin-top -6px
          margin-left 11px
        &:hover
          .tooltip
            opacity 1
        &:active
          background-color brandColor
          border-color brandColor
    .folderList
      absolute bottom
      top 33px
      overflow-y auto
    .folderList button
      height 33px
      width 199px
      border none
      text-align left
      font-size 14px
      background-color transparent
      color white
      padding-left 15px
      overflow ellipsis
      &:hover
        background-color alpha(white, 0.05)
      &.active, &:active
        background-color alpha(lighten(brandColor, 25%), 70%)
        .articleCount
          color white
      .articleCount
        color articleCount
        font-size 12px