.root
  user-select none
  color $nav-text-color

.header
  position relative
  height 33px
  cursor pointer
  color $nav-inactive-text-color
  transition 0.15s
  border none
  width 100%
  text-align left
  background-color transparent
  font-size 14px
  &:hover
    background-color $nav-hover-background
    .header-control-button
      opacity 1
  &:active, &:active:hover
    background-color $nav-active-background
    color $nav-text-color

.header--active
  @extend .header
  background-color $nav-active-background
  color $nav-text-color
  .header-control-button
    opacity 1
  &:hover
    background-color $nav-active-background
    color $nav-text-color

.header-name
  position absolute
  left 0
  top 0
  bottom 0
  right 72px
  padding-left 10px
  line-height 33px

.header-name-label
  margin-left 5px

.header-control
  position absolute
  top 0
  bottom 0
  right 5px
  width 48px

.header-control-button
  width 24px
  padding 0
  margin-top 4.5px
  height 24px
  border none
  border-radius 5px
  background-color transparent
  color $nav-inactive-text-color
  opacity 0
  transition color background-color 0.15s
  &:hover
    background-color $nav-hover-background
  &:active
    background-color $nav-active-background
    color $nav-text-color

.header-control-button--show
  @extend .header-control-button
  opacity 1

.newFolderForm
  width 100%
  padding 0 15px
  height 33px

.newFolderForm-nameInput
  width 100%
  height 33px
  padding 0 10px
  border-radius 5px
  border solid 1px $nav-border-color
  outline none
  &:focus
    border-color $focus-border-color
  &:disabled
    background-color $disabled-input-background

.newFolderButton
  height 33px
  width 100%
  border none
  padding-left 20px
  text-align left
  color $nav-inactive-text-color
  background-color transparent
  transition color background-color 0.15s
  &:hover
    background-color $nav-hover-background
  &:active
    background-color $nav-active-background
    color $nav-text-color

.newFolderButton
  height 34px
  line-height 34px
.newFolderButton-label
  margin-left 0

.root-folded
  @extend .root
  width 44px
  .header, .header--active
    width 44px
    text-align center
    overflow hidden
    &:hover
      .header-name-label
        width 134px
        padding-left 34px
      .header-control
        width 35px
        padding-right 5px
  .header-name
    width 44px
    padding-left 0
  .header-name-label
    position fixed
    display inline-block
    height 34px
    left 44px
    width 0
    box-sizing border-box
    margin-left 0
    overflow ellipsis
    background-color $nav-tooltip-background-color
    color white
    line-height 34px
    border-top-right-radius 5px
    border-bottom-right-radius 5px
    transition width 0.15s
    pointer-events none
  .header-control
    position fixed
    width 0
    height 33px
    top inherit
    bottom inherit
    left 43px
    box-sizing border-box
    overflow hidden
  .header-control-button
    display none
  .header-control-button--show
    float right
    background-color $nav-tooltip-button-background
    &:hover
      background-color $nav-tooltip-button-background--hover
  .newFolderButton
    width 44px
    padding 0
    &:hover .newFolderButton-label
      width 100px
  .newFolderButton-icon
    text-align center
    width 44px
  .newFolderButton-label
    position fixed
    display inline-block
    height 34px
    left 44px
    width 0
    box-sizing border-box
    margin-left 0
    overflow ellipsis
    background-color $nav-tooltip-background-color
    color white
    line-height 34px
    border-top-right-radius 5px
    border-bottom-right-radius 5px
    transition width 0.15s
    pointer-events none
    font-size 14px
    text-align center
  .newFolderForm-nameInput
    position fixed
    width 100px