$control-height = 30px

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

.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--active
  @extend .control-button
  color $ui-active-color
  &:hover
    color $ui-active-color

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

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

  .control
    background-color $ui-dark-noteList-backgroundColor

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

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