.root
  absolute left bottom
  border-top $ui-border
  border-bottom $ui-border
  overflow auto
  top $topBar-height - 1

.item
  position relative
  height 80px
  border-bottom $ui-border
  padding 0 5px
  user-select none
  cursor pointer
  transition background-color 0.15s
  &:hover
    background-color alpha($ui-active-color, 10%)

.item--active
  @extend .item
  .item-border
    border-color $ui-active-color

.item-border
  absolute top bottom left right
  border-style solid
  border-width 2px
  border-color transparent
  transition 0.15s

.item-info
  height 30px
  clearfix()
  font-size 12px
  color $ui-inactive-text-color
  line-height 30px
  overflow-y hidden

.item-info-left
  float left
  overflow ellipsis

.item-info-left-folder
  border-left 4px solid transparent
  padding 2px 5px
  color $ui-text-color
.item-info-left-folder-surfix
  font-size 10px
  margin-left 5px
  color $ui-inactive-text-color
.item-info-right
  float right

.item-title
  height 20px
  line-height 20px
  padding 0 5px 0 0
  font-weight bold
  overflow ellipsis
  color $ui-text-color
.item-title-icon
  font-size 12px
  color $ui-inactive-text-color
  padding-right 3px
.item-title-empty
  font-weight normal
  color $ui-inactive-text-color

.item-tagList
  height 30px
  font-size 12px
  line-height 30px
  overflow ellipsis

.item-tagList-icon
  vertical-align middle
  color $ui-button-color

.item-tagList-item
  margin 0 4px
  padding 0 4px
  height 20px
  border-radius 3px
  vertical-align middle
  border-style solid
  border-color $ui-button--focus-borderColor
  border-width 0 0 0 3px
  background-color $ui-backgroundColor

.item-tagList-empty
  color $ui-inactive-text-color
  vertical-align middle

body[data-theme="dark"]
  .root
    border-color $ui-dark-borderColor
    background-color $ui-dark-backgroundColor

  .item
    border-color $ui-dark-borderColor
    &:hover
      background-color alpha($ui-active-color, 20%)

  .item--active
    @extend .item
    .item-border
      border-color $ui-active-color

  .item-info
    color $ui-dark-inactive-text-color

  .item-info-left-folder
    color $ui-dark-text-color
  .item-info-left-folder-surfix
    color $ui-dark-inactive-text-color

  .item-title
    color $ui-dark-text-color
  .item-title-icon
    color $ui-darkinactive-text-color
  .item-title-empty
    color $ui-dark-inactive-text-color

  .item-tagList-icon
    color $ui-dark-button-color

  .item-tagList-item
    border-color $ui-dark-button--focus-borderColor
    background-color $ui-dark-button--hover-backgroundColor
    color $ui-dark-text-color

  .item-tagList-empty
    color $ui-inactive-text-color
    vertical-align middle
