.folderItem
  height 35px
  box-sizing border-box
  padding 2.5px 15px
  display flex
  &:hover
    background-color darken(white, 3%)

.folderItem-drag-handle
  height 35px
  border none
  padding 0 10px
  line-height 35px
  float left
  cursor row-resize

.folderItem-left
  height 30px
  border-left solid 2px transparent
  padding 0 10px
  line-height 30px
  flex 1
  white-space nowrap
  text-overflow ellipsis
  overflow hidden
.folderItem-left-danger
  color $danger-color
  font-weight bold

.folderItem-left-key
  color $ui-inactive-text-color
  font-size 13px
  margin 0 5px
  border none

.folderItem-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

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

.folderItem-right
  -webkit-box-flex: 1
  white-space nowrap

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

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

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

body[data-theme="dark"]
  .folderItem
    &:hover
      background-color lighten($ui-dark-button--hover-backgroundColor, 5%)

  .folderItem-left-danger
    color $danger-color
    font-weight bold

  .folderItem-left-key
    color $ui-dark-inactive-text-color

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

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

  .folderItem-right-confirmButton
    colorDarkPrimaryButton()

  .folderItem-right-dangerButton
    colorDarkDangerButton()

apply-theme(theme)
  body[data-theme={theme}]
    .folderItem
      &:hover
        background-color get-theme-var(theme, 'button-backgroundColor')

    .folderItem-left-danger
      color $danger-color

    .folderItem-left-key
      color $ui-dark-inactive-text-color

    .folderItem-left-colorButton
      colorThemedPrimaryButton(theme)

    .folderItem-right-button
      colorThemedPrimaryButton(theme)

    .folderItem-right-confirmButton
      colorThemedPrimaryButton(theme)

    .folderItem-right-dangerButton
      colorThemedPrimaryButton(theme)

for theme in 'solarized-dark' 'dracula'
  apply-theme(theme)

for theme in $themes
  apply-theme(theme)