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

.header
  position relative
  width 100%
  height 33px
  cursor pointer
  text-align left
  font-size 14px
  color $ui-inactive-text-color
  &:hover
    background-color $ui-button--hover-backgroundColor
  &:hover .header-control-button
    opacity 1
  &:active
    background-color $ui-button--active-backgroundColor
    color $ui-button--active-color
    .header-control-button, .header-control-button--show
      color white

.header--active, .header--active:hover, .header--active:active
  @extend .header
  background-color $ui-button--active-backgroundColor
  color $ui-button--active-color
  &:hover
    background-color $ui-button--active-backgroundColor
  .header-control-button,
  .header-control-button--show
    color white
    opacity 1
    &:hover
      background-color alpha(white, 30%)
    &:active
      background-color alpha(white, 15%)

.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
  border none
  background-color transparent
  width 24px
  height 24px
  padding 0
  margin-top 4.5px
  border-radius 5px
  opacity 0
  color $ui-inactive-text-color
  transition color background-color 0.15s
  &:hover
    background-color $ui-button--hover-backgroundColor

.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 $ui-border
  outline none
  &:focus
    border-color $ui-input--focus-borderColor
  &:disabled
    background-color $ui-input--disabled-backgroundColor

.newFolderButton
  navButtonColor()
  height 34px
  width 100%
  border none
  padding 0 0 0 20px
  text-align left
  line-height 34px

.newFolderButton-label
  margin-left 0

.root-folded
  @extend .root
  width 44px - 1
  .header, .header--active
    width 44px - 1
    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 - 1
    padding-left 0
  .header-name-label
    position fixed
    display inline-block
    height 34px
    left 44px - 1
    width 0
    box-sizing border-box
    margin-left 0
    overflow ellipsis
    background-color $ui-tooltip-backgroundColor
    z-index 10
    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
    z-index 11
    left 44px - 1
    box-sizing border-box
    overflow hidden
  .header-control-button
    display none
  .header-control-button--show
    float right
    background-color $ui-tooltip-button-backgroundColor
    &:hover
      background-color $ui-tooltip-button--hover-backgroundColor
  .newFolderButton
    width 44px - 1
    padding 0
    &:hover .newFolderButton-label
      width 100px
  .newFolderButton-icon
    text-align center
    width 44px - 1
  .newFolderButton-label
    position fixed
    display inline-block
    height 34px
    left 44px
    width 0
    box-sizing border-box
    margin-left 0
    overflow ellipsis
    background-color $ui-tooltip-backgroundColor
    z-index 10
    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