.root
  width 100%
  user-select none
  padding-top 20px

.header
  position relative
  height 36px
  width 100%
  margin-bottom 5px
  transition 0.15s
  display flex
  align-items center

.header--active
  margin-bottom 5px
  background-color alpha($ui-button-default--active-backgroundColor, 20%)
  transition color background-color  0.15s
  display flex
  align-items center
  .header-toggleButton
  .header-info
  .header-addFolderButton
    color #1EC38B

.header-toggleButton
  navButtonColor()
  position absolute
  left 0
  width 25px
  height 25px
  padding 0
  border none
  border-radius 50%
  &:hover
    transition 0.2s
    background-color alpha($ui-button-default--hover-backgroundColor, 40%)
    color $ui-text-color

.header-info
  navButtonColor()
  display block
  width 100%
  height 36px
  padding-left 25px
  padding-right 15px
  line-height 36px
  cursor pointer
  font-size 14px
  border none
  overflow ellipsis
  text-align left
  font-weight 600;
  background-color transparent
  &:hover
    color #1EC38B
    background-color alpha($ui-button-default--active-backgroundColor, 20%)
    transition background-color 0.15s
  &:active, &:active:hover
    color #1EC38B
    background-color alpha($ui-button-default--active-backgroundColor, 20%)

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

.header-addFolderButton
  navButtonColor()
  position absolute
  right 7px
  width 25px
  height 25px
  padding 0
  border none
  border-radius 50%
  &:hover
    transition 0.2s

.root--folded
  @extend .root
  .header
    width 100%
    padding-left 5px
  .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
    padding-left 9px
  .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

body[data-theme="white"]
  .header--active
    background-color $ui-button--active-backgroundColor
    transition color background-color  0.15s
    .header-toggleButton
      color $ui-text-color
    .header-info
      color $ui-text-color
    .header-addFolderButton
      color $ui-text-color

  .header-toggleButton
    navWhiteButtonColor()
    &:hover
      background-color alpha($ui-button--active-backgroundColor, 40%)
      color $ui-text-color

  .header-info
    navWhiteButtonColor()
    background-color alpha($ui-button--active-backgroundColor, 20%)

  .header-addFolderButton
    navWhiteButtonColor()
    &:hover
      background-color alpha($ui-button--active-backgroundColor, 40%)
      color $ui-text-color

apply-theme(theme)
  body[data-theme={theme}]
    .header--active
      background-color get-theme-var(theme, 'button--active-backgroundColor')
      transition color background-color  0.15s

    .header--active
      .header-toggleButton
        color get-theme-var(theme, 'text-color')

    .header--active
      .header-info
        color get-theme-var(theme, 'text-color')
        background-color get-theme-var(theme, 'button--active-backgroundColor')
        &:active
          color get-theme-var(theme, 'text-color')
          background-color get-theme-var(theme, 'button--active-backgroundColor')

    .header--active
      .header-addFolderButton
        color get-theme-var(theme, 'text-color')

    .header-toggleButton
      &:hover
        transition 0.2s
        color get-theme-var(theme, 'text-color')
        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
      &:active, &:active:hover
        color get-theme-var(theme, 'text-color')
        background-color get-theme-var(theme, 'button--active-backgroundColor')

    .header-info
      background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
      &:hover
        transition 0.2s
        color get-theme-var(theme, 'text-color')
        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
      &:active, &:active:hover
        color get-theme-var(theme, 'text-color')
        background-color get-theme-var(theme, 'button--active-backgroundColor')

    .header-addFolderButton
      &:hover
        transition 0.2s
        color get-theme-var(theme, 'text-color')
        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
      &:active, &:active:hover
        color get-theme-var(theme, 'text-color')
        background-color get-theme-var(theme, 'button--active-backgroundColor')

apply-theme('dark')

for theme in $themes
  apply-theme(theme)