bgColor = #E6E6E6
inputBgColor = white
iptFocusBorderColor = #369DCD

topBarBtnColor = #B3B3B3
topBarBtnBgColor = #B3B3B3
topBarBtnBgActiveColor = #3A3A3A

infoBtnColor = bgColor
infoBtnBgColor = #B3B3B3
infoBtnActiveBgColor = #3A3A3A

.ArticleTopBar
  absolute top right
  left 200px
  height 60px
  background-color bgColor
  user-select none
  &>.tutorial
    .clickJammer
      fixed top left bottom right
      z-index 40
      background transparent
    .global
      fixed bottom right
      height 100px
      z-index 35
      font-style italic
    .finder
      fixed bottom right
      height 250px
      left 50%
      margin-left -250px
      z-index 35
      font-style italic
    .back
      fixed top left bottom right
      z-index 20
      background-color transparentify(black, 80%)
  &>.ArticleTopBar-left
    float left
    &>.tutorial
      fixed top
      left 200px
      z-index 36
      font-style italic
    &>.ArticleTopBar-left-search
      position relative
      float left
      height 33px
      margin-top 13.5px
      margin-left 15px
      width 350px
      padding 5px 15px
      transition 0.1s
      font-size 16px
      border 1px solid transparent
      z-index 30
      .tooltip
        tooltip()
        margin-left -24px
        margin-top 35px
        opacity 1
        &.hide
          opacity 0
        ul
          li
            line-height 18px
          li:last-child
            line-height 10px
            margin-bottom 3px
        small
          font-size 10px
          position relative
          top -2px
          margin-left 15px
      input
        absolute top left
        width 350px
        border-radius 16.5px
        background-color inputBgColor
        border 1px solid transparent
        padding-left 35px
        outline none
        font-size 14px
        height 33px
        line-height 33px
        z-index 0
        &:focus
          border-color iptFocusBorderColor
      i.fa.fa-search
        position absolute
        display block
        top 0
        left 10px
        line-height 33px
        z-index 1
        pointer-events none
      .ArticleTopBar-left-search-clear-button
        position absolute
        top 6px
        right 10px
        width 20px
        height 20px
        border-radius 10px
        border none
        background-color transparent
        color topBarBtnColor
        transition 0.1s
        line-height 20px
        text-align center
        padding 0
        &:hover
          color white
          background-color topBarBtnBgColor
        &:active
          color white
          background-color darken(topBarBtnBgColor, 35%)
    .ArticleTopBar-left-unsaved
      line-height 33px
      float left
      height 33px
      margin-top 13.5px
      margin-left 10px
      button
        background transparent
        font-size 20px
        border none
        outline none
        color inactiveTextColor
        width 33px
        height 33px
        border-radius 16.5px
        transition 0.1s
        &:hover
          color inherit
        &:active
          color inherit
          background-color lighten(topBarBtnBgColor, 15%)
        &:disabled
          color inactiveTextColor
          background transparent
        &:focus
          color focusBorderColor
        &.ArticleTopBar-left-unsaved-save-button
          position relative
          .ArticleTopBar-left-unsaved-save-button-count
            position absolute
            font-size 10px
            background-color brandColor
            color white
            height 14px
            width 14px
            line-height 14px
            border-radius 7px
            top 16px
            right -3px
            transition 0.15s
            &.hide
              transform scale(0)
          .ArticleTopBar-left-unsaved-save-button-tooltip
            tooltip()
            margin-top 30px
            margin-left -100px
          &:hover
            .ArticleTopBar-left-unsaved-save-button-tooltip
              opacity 1

  &>.ArticleTopBar-right
    float right
    &>button
      display block
      position absolute
      right 74px
      top 20px
      width 20px
      height 20px
      font-size 14px
      line-height 14px
      background-color infoBtnBgColor
      color bgColor
      border-radius 11px
      border 1px solid bgColor
      transition 0.1s
      &:focus
        border-color focusBorderColor
      .tooltip
        tooltip()
        margin-left -50px
        margin-top 29px
      &:hover
        background-color infoBtnActiveBgColor
        .tooltip
          opacity 1

    &>.ArticleTopBar-right-links-button
      display block
      position absolute
      top 8px
      right 15px
      opacity 0.7
      border-radius 23px
      height 46px
      width 46px
      border 1px solid transparent
      &:focus
        border-color focusBorderColor
      &:hover
        opacity 1
        .tooltip
          opacity 1
    &>.ArticleTopBar-right-links-button-dropdown
      position fixed
      z-index 50
      right 10px
      top 40px
      background-color transparentify(invBackgroundColor, 80%)
      padding 5px 0
      .ArticleTopBar-right-links-button-dropdown-item
        padding 0 10px
        height 33px
        width 100%
        display block
        line-height 33px
        text-decoration none
        color white
        &:hover
          background-color transparentify(lighten(invBackgroundColor, 30%), 80%)