.root
  position relative

.header
  height 26px
.header-toggleButton
  absolute top left
  width 25px
  height 26px
  navButtonColor()
  border none
  outline none
.header-name
  display block
  height 26px
  navButtonColor()
  padding 0 10px 0 25px
  font-size 14px
  width 100%
  text-align left
  line-height 26px
  box-sizing border-box
  cursor pointer
  outline none

.header-name--active
  @extend .header-name
  background-color $ui-button--active-backgroundColor
  color $ui-button--active-color
  &:hover
    background-color $ui-button--active-backgroundColor

.folderList-item
  display block
  width 100%
  height 26px
  navButtonColor()
  padding 0 10px 0 25px
  font-size 14px
  width 100%
  text-align left
  line-height 26px
  box-sizing border-box
  cursor pointer
  outline none
  padding 0 10px
  margin 2px 0
  height 26px
  line-height 26px
  border-width 0 0 0 6px
  border-style solid
  border-color transparent

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

body[data-theme="dark"]
  .header-toggleButton
    navDarkButtonColor()
  .header-name
    navDarkButtonColor()

  .header-name--active
    @extend .header-name
    background-color $ui-button--active-backgroundColor
    color $ui-button--active-color
    &:hover
      background-color $ui-button--active-backgroundColor

  .folderList-item
    navDarkButtonColor()
    border-width 0 0 0 6px
    border-style solid
    border-color transparent

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