$control-height = 30px

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

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

.item-wrapper
  padding 15px 0
  border-bottom $ui-border

.item--active
  @extend .item
  background-color $ui-button--active-backgroundColor
  color $ui-text-color
  .item-title
  .item-title-empty
  .item-bottom-tagList-empty
  .item-bottom-time
  .item-title-icon
    color $ui-text-color
  .item-bottom-tagList-item
    background-color transparent
    color $ui-text-color
  .item-wrapper
    border-color transparent
  &:hover
    background-color $ui-button--active-backgroundColor

.item-title
  font-size 12px
  height 40px
  box-sizing border-box
  line-height 24px
  padding-top 5px
  padding-bottom 20px
  overflow ellipsis
  color $ui-inactive-text-color

.item-title-icon
  position absolute
  top 20px
  right 25px
  font-size 12px
  color $ui-inactive-text-color

.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-tagList
  flex 1
  overflow ellipsis
  line-height 20px
  color #FFFFFF

.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 10px

.item-star
  position absolute
  top 20px
  right 29px
  width 34px
  height 34px
  color $ui-favorite-star-button-color
  font-size 12px
  padding 0
  border-radius 17px

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
    &:active
      background-color $ui-dark-button--active-backgroundColor
    &:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)

  .item-wrapper
    border-color $ui-dark-borderColor

  .item--active
    @extend .item
    border-color $ui-dark-borderColor
    background-color $ui-dark-button--active-backgroundColor
    .item-wrapper
      border-color transparent
    .item-title
      color white
    .item-bottom-tagList-item
      background-color transparent
      color white
    .item-bottom-tagList-empty
      color white
    &:hover
      background-color $ui-dark-button--active-backgroundColor

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