.root
  position relative
  flex 1
  min-width 70px
  overflow hidden
  border-left 1px solid $ui-borderColor
  border-top 1px solid $ui-borderColor
  &:hover
    background-color alpha($ui-button--active-backgroundColor, 20%)
    .deleteButton
      color: $ui-text-color
      visibility visible
      transition 0.15s
    .button
      color: $ui-text-color
      transition 0.15s

.root--active
  @extend .root
  min-width 100px
  background-color alpha($ui-button--active-backgroundColor, 60%)
  .deleteButton
    visibility visible
    color: $ui-text-color
    transition 0.15s
  .button
    font-weight bold
    color: $ui-text-color
    transition 0.15s

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

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

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

body[data-theme="default"], body[data-theme="white"]
  .root--active
    &:hover
      background-color alpha($ui-button--active-backgroundColor, 60%)

body[data-theme="dark"]
  .root
    border-color $ui-dark-borderColor
    border-top 1px solid $ui-dark-borderColor
    &:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
      transition 0.15s
      .button
        color $ui-dark-text-color
        transition 0.15s
      .deleteButton
        color $ui-dark-text-color
        transition 0.15s

  .root--active
    background-color $ui-dark-button--active-backgroundColor
    border-left 1px solid $ui-dark-borderColor
    border-top 1px solid $ui-dark-borderColor
    .button
      color $ui-dark-text-color
    .deleteButton
      color $ui-dark-text-color

  .button
    border none
    background-color transparent
    transition color background-color 0.15s
    border-left 4px solid transparent

  .input
    background-color $ui-dark-button--active-backgroundColor
    color $ui-dark-text-color
    transition 0.15s

apply-theme(theme)
  body[data-theme={theme}]
    .root
      border-color get-theme-var(theme, 'borderColor')
      &:hover
        background-color get-theme-var(theme, 'noteDetail-backgroundColor')
        transition 0.15s
        .deleteButton
          color get-theme-var(theme, 'text-color')
          transition 0.15s
        .button
          color get-theme-var(theme, 'text-color')
          transition 0.15s

    .root--active
      color get-theme-var(theme, 'active-color')
      background-color get-theme-var(theme, 'button-backgroundColor')
      border-color get-theme-var(theme, 'borderColor')
      .deleteButton
        color get-theme-var(theme, 'text-color')
      .button
        color get-theme-var(theme, 'active-color')

    .button
      border none
      color $ui-inactive-text-color
      background-color transparent
      transition color background-color 0.15s
      border-left 4px solid transparent

    .input
      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
      color get-theme-var(theme, 'text-color')
      transition 0.15s

for theme in 'solarized-dark' 'dracula'
  apply-theme(theme)

for theme in $themes
  apply-theme(theme)