$control-height = 30px

.root
  absolute left bottom
  top $topBar-height - 1
  background-color $ui-noteList-backgroundColor

.control
  absolute top left right
  user-select none
  height $control-height
  font-size 12px
  line-height 25px
  display flex
  background-color $ui-noteList-backgroundColor
  color $ui-inactive-text-color

.control-sortBy
  flex 1
  padding-left 25px

.control-sortBy-select
  margin-left 0
  font-size 12px
  color $ui-inactive-text-color
  padding 0
  border none
  background-color transparent
  font-size 10px

.control-button
  width 25px
  padding 0
  background-color transparent
  border none
  color $ui-inactive-text-color
  transition 0.15s
  &:active, &:active:hover
    color $ui-active-color
  &:hover
    color $ui-text-color
    .control-button-tooltip
      opacity 1

.control-button--active
  @extend .control-button
  color $ui-active-color
  &:hover
    color $ui-active-color

.control-button-tooltip
  tooltip()
  position absolute
  top 20px
  right 5px
  padding 5px
  opacity 0
  white-space nowrap
  border-radius 2px
  z-index 1

.list
  absolute left right bottom
  top $control-height
  overflow auto

.item
  position relative
  padding 20px 25px
  user-select none
  cursor pointer
  background-color $ui-noteList-backgroundColor
  transition background-color 0.15s
  &:hover
    background-color alpha($ui-active-color, 20%)
  &:active
    background-color $ui-active-color
    color white
    .item-title
    .item-title-empty
    .item-title-icon
    .item-bottom-tagIcon
    .item-bottom-tagList-empty
    .item-bottom-time
      color white
    .item-bottom-tagList-item
      background-color transparent
      color white

.item--active
  @extend .item
  background-color $ui-active-color
  color white
  .item-title
  .item-title-empty
  .item-title-icon
  .item-bottom-tagIcon
  .item-bottom-tagList-empty
  .item-bottom-time
    color white
  .item-bottom-tagList-item
    background-color transparent
    color white
  &:hover
    background-color $ui-active-color

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

.item-title
  font-size 14px
  height 40px
  box-sizing border-box
  line-height 24px
  padding 10px 0
  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-bottom
  position relative
  bottom 0px
  margin-top 2px
  height 20px
  font-size 12px
  line-height 20px
  overflow ellipsis
  display flex

.item-bottom-tagIcon
  vertical-align middle
  color $ui-button-color
  height 20px
  line-height 20px

.item-bottom-tagList
  flex 1
  overflow ellipsis
  line-height 20px

.item-bottom-tagList-item
  font-size 12px
  margin-right 8px
  padding 0 10px
  height 20px
  box-sizing border-box
  border-radius 20px
  vertical-align middle
  background-color $ui-tag-backgroundColor
  color #FFFFFF

.item-bottom-tagList-empty
  color $ui-inactive-text-color
  vertical-align middle
  font-size 10px
  margin-left 5px

.item-bottom-time
  color $ui-inactive-text-color
  font-size 12px

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

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

  .item--active
    @extend .item
    border-color $ui-dark-borderColor
    .item-title
      color white
    .item-bottom-tagList-item
      background-color transparent
      color white
    .item-bottom-tagList-empty
      color white
    &:hover
      background-color $ui-active-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-bottom-tagIcon
    color $ui-dark-button-color

  .item-bottom-tagList-item
    background-color $ui-dark-tag-backgroundColor
    color $ui-dark-text-color

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

  .control
    background-color $ui-dark-noteList-backgroundColor
    border-color $ui-dark-borderColor
  .control-sortBy-select
    color $ui-dark-text-color

  .control-button
    color $ui-dark-inactive-text-color
    &:hover
      color $ui-dark-text-color