.awesomplete
  display inline-block
  position relative
  
  .visually-hidden
    position absolute
    clip rect(0, 0, 0, 0)
  
  ul
    position fixed
    z-index 1
    box-sizing border-box
    list-style none
    padding 0
    margin 0
    
    border-radius 4px
    margin .2em 0 0
    background-color $ui-noteList-backgroundColor
    border 1px solid rgba(0,0,0,.3)
    box-shadow .05em .2em .6em rgba(0,0,0,.2)
    text-shadow none
    
    &:empty,
    &[hidden]
      display none
    
    &:before
      content ""
      position absolute
      top -.43em
      left 1em
      width 0 height 0
      padding .4em
      background-color $ui-noteList-backgroundColor
      border inherit
      border-right 0
      border-bottom 0
      -webkit-transform rotate(45deg)
      transform rotate(45deg)
      
    li
      position relative
      padding 6px 18px 6px 10px
      cursor pointer
      
	  li:hover
      background-color alpha($ui-button--active-backgroundColor, 20%)
      color $ui-text-color
    
	  li[aria-selected="true"]
      background-color alpha($ui-button--active-backgroundColor, 40%)
      color $ui-text-color
  
  mark
    background-color rgba(255, 255, 0, 0.8)

body[data-theme="dark"]
  .awesomplete ul
    border-color $ui-dark-borderColor
    background-color $ui-dark-noteList-backgroundColor
    color $ui-dark-text-color
    
    &:before
      background-color $ui-dark-noteList-backgroundColor
    
    li:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
      color $ui-dark-text-color
    
    li[aria-selected="true"]
      background-color $ui-dark-button--active-backgroundColor
      color $ui-dark-text-color

body[data-theme="white"]
  .awesomplete ul
    background-color $ui-white-noteList-backgroundColor
    
    li:hover
      background-color alpha($ui-button--active-backgroundColor, 60%)
    
    li[aria-selected="true"]
      background-color $ui-button--active-backgroundColor

body[data-theme="solarized-dark"]
  .awesomplete ul
    border-color $ui-solarized-dark-borderColor
    background-color $ui-solarized-dark-noteList-backgroundColor
    color $ui-solarized-dark-text-color
    
    &:before
      background-color $ui-solarized-dark-noteList-backgroundColor
    
    li:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
      color $ui-solarized-dark-text-color
    
    li[aria-selected="true"]
      background-color $ui-dark-button--active-backgroundColor
      color $ui-solarized-dark-text-color

body[data-theme="monokai"]
  .awesomplete ul
    border-color $ui-monokai-borderColor
    background-color $ui-monokai-noteList-backgroundColor
    color $ui-monokai-text-color
    
    &:before
      background-color $ui-dark-noteList-backgroundColor
    
    li:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
      color $ui-monokai-text-color
    
    li[aria-selected="true"]
      background-color $ui-monokai-button-backgroundColor
      color $ui-monokai-text-color