.root
  width 100%
  user-select none
.header
  position relative
  height 26px
  width 100%
  transition 0.15s
  &:hover
    background-color $ui-button--hover-backgroundColor
  &:active
    .header-toggleButton
    .header-addFolderButton
      color white
      &:active
        color $ui-active-color

.header--active
  @extend .header
  .header-info
    color $ui-button--active-color
    background-color $ui-button--active-backgroundColor
  .header-toggleButton
  .header-addFolderButton
    color white
    &:active
    &:hover
    &:hover:active
      color white

.header-toggleButton
  position absolute
  left 0
  width 25px
  height 26px
  padding 0
  border none
  color $ui-inactive-text-color
  background-color transparent
  &:hover
    color $ui-text-color
  &:active
    color $ui-active-color

.header-info
  display block
  width 100%
  height 26px
  padding-left 25px
  padding-right 10px
  line-height 26px
  cursor pointer
  font-size 14px
  border none
  overflow ellipsis
  text-align left
  background-color transparent
  color $ui-inactive-text-color
  &:active
    color $ui-button--active-color
    background-color $ui-button--active-backgroundColor

.header-info-path
  font-size 10px
  margin 0 5px

.header-addFolderButton
  position absolute
  right 0
  width 25px
  height 26px
  padding 0
  border none
  color $ui-inactive-text-color
  background-color transparent
  &:hover
    color $ui-text-color
  &:active
    color $ui-active-color

.folderList-item
  display flex
  width 100%
  height 26px
  background-color transparent
  color $ui-inactive-text-color
  padding 0
  margin-bottom 2px
  text-align left
  border none
  overflow ellipsis
  font-size 14px
  &:first-child
    margin-top 0
  &:hover
    background-color $ui-button--hover-backgroundColor
  &:active
    color $ui-button--active-color
    background-color $ui-button--active-backgroundColor

.folderList-item--active
  @extend .folderList-item
  color $ui-button--active-color
  background-color $ui-button--active-backgroundColor
  &:hover
    color $ui-button--active-color
    background-color $ui-button--active-backgroundColor

.folderList-item-name
  display block
  flex 1
  padding 0 10px
  height 26px
  line-height 26px
  border-width 0 0 0 6px
  border-style solid
  border-color transparent

.folderList-item-noteCount
  float right
  line-height 26px
  padding-right 5px
  font-size 12px

.folderList-item-tooltip
  tooltip()
  position fixed
  padding 0 10px
  left 44px
  z-index 10
  pointer-events none
  opacity 0
  border-top-right-radius 2px
  border-bottom-right-radius 2px
  height 26px
  line-height 26px

.root--folded
  @extend .root
  .header
    width 100%
  .header-info
    overflow ellipsis
    padding 0 0 0 18px
    &:hover .header-info--folded-tooltip
      opacity 1
  .header-info-path
    display none
  .header-toggleButton
    width 15px
  .header-info--folded-tooltip
    tooltip()
    position fixed
    padding 0 10px
    left 44px
    z-index 10
    pointer-events none
    opacity 0
    border-top-right-radius 2px
    border-bottom-right-radius 2px
  .header-info--folded-tooltip-path
    font-size 10px
    margin 0 5px
  .folderList-item:hover, .folderList-item--active:hover
    .folderList-item-tooltip
      opacity 1
  .folderList-item-name
    padding-left 14px
body[data-theme="dark"]
  .header-toggleButton
  .header-addFolderButton
    color $ui-dark-inactive-text-color
    &:hover
      color $ui-dark-text-color
    &:active
      color $ui-dark-active-color
  .header--active
    .header-toggleButton
    .header-addFolderButton
      color white
      &:active
        color white