.root
  position relative
  flex 1
  min-width 70px
  overflow hidden
  &:hover
    .deleteButton
      color $ui-inactive-text-color
      &:hover
        background-color darken($ui-backgroundColor, 15%)
      &:active
        color white
        background-color $ui-active-color

.root--active
  @extend .root
  min-width 100px
  border-bottom $ui-border

.button
  width 100%
  height 29px
  overflow ellipsis
  text-align left
  padding-right 23px
  margin-right -23px
  border none
  background-color transparent
  transition 0.15s
  border-left 4px solid transparent
  &:hover
    background-color $ui-button--hover-backgroundColor

.deleteButton
  position absolute
  top 5px
  height 20px
  right 5px
  width 20px
  text-align center
  border none
  padding 0
  color $ui-inactive-text-color
  background-color transparent
  border-radius 2px

.input
  height 29px
  border $ui-active-color
  padding 0 5px
  width 100%
  outline none

body[data-theme="dark"]
  .root
    color $ui-dark-text-color
    border-color $ui-dark-borderColor
    &:hover
      background-color $ui-dark-button--hover-backgroundColor
      .deleteButton
        color $ui-dark-inactive-text-color
        &:hover
          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
        &:active
          color $ui-dark-text-color
          background-color $ui-dark-button--active-backgroundColor

  .root--active
    color $ui-dark-text-color
    border-color $ui-dark-borderColor
    &:hover
      background-color $ui-dark-button--hover-backgroundColor
      .deleteButton
        color $ui-dark-inactive-text-color
        &:hover
          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
        &:active
          color $ui-dark-text-color
          background-color $ui-dark-button--active-backgroundColor

  .button
    border none
    color $ui-dark-text-color
    background-color transparent
    transition color background-color 0.15s
    border-left 4px solid transparent
    &:hover
      color $ui-dark-text-color
      background-color $ui-dark-button--hover-backgroundColor

  .input
    background-color $ui-dark-button--hover-backgroundColor
    color $ui-dark-text-color

  .deleteButton
    color alpha($ui-dark-text-color, 30%)

body[data-theme="solarized-dark"]
  .root
    color $ui-solarized-dark-text-color
    border-color $ui-dark-borderColor
    &:hover
      background-color $ui-solarized-dark-noteDetail-backgroundColor
      .deleteButton
        color $ui-solarized-dark-text-color
        &:hover
          background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 15%)
        &:active
          color $ui-solarized-dark-text-color
          background-color $ui-dark-button--active-backgroundColor

  .root--active
    color $ui-solarized-dark-text-color
    border-color $ui-solarized-dark-borderColor
    &:hover
      background-color $ui-solarized-dark-noteDetail-backgroundColor
      .deleteButton
        color $ui-solarized-dark-text-color
        &:hover
          background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 15%)
        &:active
          color $ui-solarized-dark-text-color
          background-color $ui-dark-button--active-backgroundColor

  .button
    border none
    color $ui-solarized-dark-text-color
    background-color transparent
    transition color background-color 0.15s
    border-left 4px solid transparent
    &:hover
      color $ui-solarized-dark-text-color
      background-color $ui-solarized-dark-noteDetail-backgroundColor

  .input
    background-color $ui-solarized-dark-noteDetail-backgroundColor
    color $ui-solarized-dark-text-color

  .deleteButton
    color alpha($ui-solarized-dark-text-color, 30%)