.root
  position relative
  margin-bottom 15px

.header
  height 35px
  line-height 30px
  padding 0 10px 5px
  box-sizing border-box
  border-bottom $default-border
  margin-bottom 5px

.header-label
  float left
  cursor pointer
  &:hover
    .header-label-editButton
      opacity 1

.header-label-path
  color $ui-inactive-text-color
  font-size 10px
  margin 0 5px
.header-label-editButton
  color $ui-text-color
  opacity 0
  transition 0.2s
.header-label--edit
  @extend .header-label

.header-label-input
  height 25px
  box-sizing border-box
  vertical-align middle
  border $ui-border
  border-radius 2px
  padding 0 5px
  outline none

.header-control
  float right

.header-control-button
  width 30px
  height 25px
  colorDefaultButton()
  border-radius 2px
  border $ui-border
  margin-right 5px
  position relative
  &:last-child
    margin-right 0
  &:hover
    .header-control-button-tooltip
      opacity 1

.header-control-button-tooltip
  tooltip()
  position absolute
  opacity 0
  padding 5px
  top 25px
  z-index 10
  white-space nowrap

.folderList-item
  height 35px
  box-sizing border-box
  padding 2.5px 15px
  &:hover
    background-color darken(white, 3%)
.folderList-item-left
  height 30px
  border-left solid 2px transparent
  padding 0 10px
  line-height 30px
  float left
.folderList-item-left-danger
  color $danger-color
  font-weight bold

.folderList-item-left-key
  color $ui-inactive-text-color
  font-size 10px
  margin 0 5px
  border none

.folderList-item-left-colorButton
  colorDefaultButton()
  height 25px
  width 25px
  line-height 23px
  padding 0
  box-sizing border-box
  vertical-align middle
  border $ui-border
  border-radius 2px
  margin-right 5px
  margin-left -15px

.folderList-item-left-nameInput
  height 25px
  box-sizing border-box
  vertical-align middle
  border $ui-border
  border-radius 2px
  padding 0 5px
  outline none

.folderList-item-right
  float right

.folderList-item-right-button
  vertical-align middle
  height 25px
  margin-top 2.5px
  colorDefaultButton()
  border-radius 2px
  border $ui-border
  margin-right 5px
  padding 0 5px
  &:last-child
    margin-right 0

.folderList-item-right-confirmButton
  @extend .folderList-item-right-button
  border none
  colorPrimaryButton()

.folderList-item-right-dangerButton
  @extend .folderList-item-right-button
  border none
  colorDangerButton()

body[data-theme="dark"]
  .header
    border-color $ui-dark-borderColor

  .header-label-path
    color $ui-dark-inactive-text-color
  .header-label-editButton
    color $ui-dark-text-color

  .header-control-button
    colorDarkDefaultButton()
    border-color $ui-dark-borderColor

  .header-control-button-tooltip
    tooltip()
    position absolute
    opacity 0
    padding 5px
    top 25px
    z-index 10
    white-space nowrap

  .folderList-item
    &:hover
      background-color lighten($ui-dark-button--hover-backgroundColor, 5%)

  .folderList-item-left-danger
    color $danger-color
    font-weight bold

  .folderList-item-left-key
    color $ui-dark-inactive-text-color

  .folderList-item-left-colorButton
    colorDarkDefaultButton()
    border-color $ui-dark-borderColor

  .folderList-item-right-button
    colorDarkDefaultButton()
    border-color $ui-dark-borderColor

  .folderList-item-right-confirmButton
    colorDarkPrimaryButton()

  .folderList-item-right-dangerButton
    colorDarkDangerButton()