$control-height = 30px

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

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

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

.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 alpha(white, 0.6)
    color $ui-text-color
  .item-wrapper
    border-color transparent
  .item-star
    color $ui-favorite-star-button-color
  &:hover
    background-color $ui-button--active-backgroundColor

.item-title-icon
  position relative
  font-size 12px
  color $ui-inactive-text-color

.item-title
  font-size 14px
  position relative
  top -12px
  left 20px
  padding-right 15px
  padding-bottom 4px
  overflow ellipsis
  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
  font-size 12px
  line-height 20px
  overflow ellipsis
  display flex

.item-bottom-tagList
  flex 1
  overflow ellipsis
  line-height 20px
  padding-top 7px
  padding-left 2px
  margin-right 27px

.item-bottom-tagList-item
  font-size 11px
  margin-right 8px
  padding 0
  height 20px
  box-sizing border-box
  border-radius 2px
  padding 1px 2px
  vertical-align middle
  background-color white
  color $ui-inactive-text-color

.item-bottom-time
  color $ui-inactive-text-color
  font-size 11px
  padding-left 2px
  padding-bottom 2px

.item-star
  position absolute
  right -20px
  bottom 2px
  width 34px
  height 34px
  color alpha($ui-favorite-star-button-color, 60%)
  font-size 12px
  padding 0
  border-radius 17px

.item-pin
  position absolute
  right -21px
  bottom 28px
  width 34px
  height 34px
  color #E54D42
  font-size 14px
  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
    &:hover
      transition 0.15s
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
      .item-title
      .item-title-icon
      .item-bottom-time
        transition 0.15s
        color $ui-dark-text-color
      .item-bottom-tagList-item
        transition 0.15s
        background-color alpha($ui-dark-button--active-backgroundColor, 40%)
        color $ui-dark-text-color
    &:active
      transition 0.15s
      background-color $ui-dark-button--active-backgroundColor
      .item-title
      .item-title-icon
      .item-bottom-time
        transition 0.15s
        color $ui-dark-text-color
      .item-bottom-tagList-item
        transition 0.15s
        background-color alpha(white, 10%)
        color $ui-dark-text-color  

  .item-wrapper
    border-color alpha($ui-dark-button--active-backgroundColor, 60%)

  .item--active
    border-color $ui-dark-borderColor
    background-color $ui-dark-button--active-backgroundColor
    .item-wrapper
      border-color transparent
    .item-title
    .item-title-icon
    .item-bottom-time
      color $ui-dark-text-color
    .item-bottom-tagList-item
      background-color alpha(white, 10%)
      color $ui-dark-text-color

  .item-title
    color $ui-inactive-text-color

  .item-title-icon
    color $ui-inactive-text-color

  .item-title-empty
    color $ui-inactive-text-color

  .item-bottom-tagList-item
    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
    color $ui-inactive-text-color

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