userNavigatorWidth = 200px
userNavigatorBgColor = #333
userNavigatorColor = #DDD
userNavigatorProfileNameColor = brandColor
userNavigatorBorderColor = #666

userContentBgColor = #E6E6E6

.UserContainer
  absolute top bottom right
  left 60px
  .content
    absolute top bottom right
    left userNavigatorWidth
    background-color userContentBgColor
  .UserNavigator
    absolute left top bottom
    width userNavigatorWidth
    background-color userNavigatorBgColor
    color userNavigatorColor
    noSelect()
    &>.profile
      height 60px
      padding 10px 15px 0
      box-sizing border-box
      position relative
      border-bottom solid 1px userNavigatorBorderColor
      cursor pointer
      &>.profileName
        color userNavigatorProfileNameColor
        font-size 22px
        cursor pointer
        transition 0.1s
      &>.name
        padding 5px 10px
        font-size 14px
        color userNavigatorColor
        cursor pointer
        transition 0.1s
      &>.dropdownIcon
        position absolute
        top 20px
        right 25px
        float right
        width 20px
        height 20px
        line-height 20px
        font-size 8px
        border solid 1px userNavigatorColor
        border-radius 12.5px
        text-align center
        transition 0.1s
      &:hover
        &>.profileName
          color lighten(brandColor, 10%)
        &>.name
          color white
        &>.dropdownIcon
          border-color white
        &:active
          &>.dropdownIcon
            background-color brandColor
            border-color brandColor
    &>.control
      padding 15px 15px
      &>.newPostButton
        background-color brandColor
        color white
        height 44px
        width 100%
        border none
        border-radius 5px
        font-size 16px
        font-weight 600
        transition 0.1s
        &:hover
          background-color lighten(brandColor, 10%)
    &>.menu
      absolute left right bottom
      top 134px
      padding 15px 0
      overflow auto
      &>.menuGruop
        &>.label
          border-bottom 1px solid userNavigatorBorderColor
          padding 10px 15px
          font-size 18px
          margin-bottom 10px
          &>.plusButton
            float right
            width 20px
            height 20px
            margin-top -2.5px
            margin-right -5px
            line-height 15px
            font-size 8px
            border solid 1px userNavigatorColor
            border-radius 10px
            background-color transparent
            text-align center
            color userNavigatorColor
            &:hover
              border-color white
              color white
              &:active
                background-color brandColor
                border-color brandColor
      &>.folders
        .folderButton
          padding 10px 25px
          width 100%
          background-color transparent
          border none
          font-size 14px
          color userNavigatorColor
          transition 0.1s
          text-align left
          &:hover
            background-color transparentify(white, 20%)
            color white
          &.active
            background-color brandColor
            color white