@import 'mixins'

#menu
  reset-list()
  fixed: top left
  height: 100%
  width: 80px
  background: menu-bg
  border-right: 1px solid menu-bg - 40%
  box-shadow: 0 0 0 1px rgba(white, .5)
  li
    position: relative
    text-align: center
    if menu-colored
      &.inactive
        border-right: 1px solid inactive-color
      &.active
        border-right: 1px solid active-color
      &.complete
        border-right: 1px solid complete-color
      &.failed
        border-right: 1px solid failed-color
    .count
      absolute: top 15px left
      text-shadow: 1px 1px 1px menu-bg - menu-intensity
      width: 100%
      color: menu-fg + (menu-intensity / 2)
    a
      display: block
      padding: 40px 0 10px 0
      color: menu-fg
      border-top: 1px solid menu-bg + menu-intensity
      border-bottom: 1px solid menu-bg - menu-intensity
      font-size: 12px
      background: menu-bg -= 2%
      &:hover
        background: menu-bg + 5%
      &:active
      &.active
        background: #343434
        box-shadow: inset 0 0 3px 2px menu-bg - 30%, inset 0 -5px 10px 2px menu-bg - 15%
        border-bottom: 1px solid menu-bg - 40%