.menu
  margin-bottom 30px

.menu-button
  navButtonColor()
  &:active
    background-color alpha($ui-button--active-backgroundColor, 20%)
    color $ui-text-color
  &:hover
    background-color alpha($ui-button--active-backgroundColor, 20%)
    color $ui-text-color
  height 32px
  padding 0 15px
  font-size 12px
  width 100%
  text-align left
  overflow ellipsis

.menu-button--active
  @extend .menu-button
  color $ui-text-color
  background-color $ui-button--active-backgroundColor
  &:hover
    background-color $ui-button--active-backgroundColor
    color $ui-text-color

.menu-button-label
  margin-left 5px

.menu--folded
  @extend .menu
  .menu-button, .menu-button--active
    text-align center
    &:hover .menu-button-label
      transition opacity 0.15s
      opacity 1
  .menu-button-label
    position fixed
    display inline-block
    height 32px
    left 44px
    padding 0 10px
    margin-top -8px
    margin-left 0
    overflow ellipsis
    background-color $ui-tooltip-backgroundColor
    z-index 10
    color white
    line-height 32px
    border-top-right-radius 2px
    border-bottom-right-radius 2px
    pointer-events none
    opacity 0
    font-size 12px

body[data-theme="dark"]
  .menu-button
    navDarkButtonColor()
    &:active
      background-color $ui-dark-button--active-backgroundColor
    &:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
      color $ui-button--active-color
  .menu-button--active
    color $ui-dark-button--active-color
    background-color $ui-dark-button--active-backgroundColor
    &:active
      background-color $ui-dark-button--active-backgroundColor