.sidebar
  $filter-height: 35px
  user-select: none
  overflow: hidden
  position: fixed
  top: $header-height
  height: calc(100% - #{$header-height})
  width: $sidebar-width
  z-index: 4
  background: $dark-bg-gradient

  .filter-row
    transition: opacity 0.15s ease-out
    opacity: 1
    &.hide
      opacity: 0
      pointer-events: none

  .filter
    position: absolute
    height: $filter-height
    width: 100%
    top: $sidebar-account-menu-height
    background: rgba(#000, 0.1)
    border-bottom: 1px solid rgba(#000, 0.35)

    input
      background: none
      color: #fff
      width: calc(100% - 35px)

    span
      background: none
      border-right: 1px solid rgba(#000, 0.35)

      img
        filter: invert(75%)
        max-width: 15px
        max-height: 15px


  .menu-sections
    box-sizing: border-box
    background: $dark-bg-gradient
    position: absolute
    width: 100%
    // transition: height 0.15s ease-out
    bottom: 0
    // top: $sidebar-account-menu-height
    height: calc(100% - #{$sidebar-account-menu-height})
    overflow-y: auto
    transition: opacity 0.15s ease-out
    &.hide
      opacity: 0
      pointer-events: none

    &:hover
      width: 100%
      padding-right: 0

  .menu-content
    box-sizing: border-box

  .menu-section
    position: relative
    height: $sidebar-tab-height
    // transition: height 0.1s ease-out
    overflow-y: hidden

  .menu-section.selected
    height: calc(100% - #{$sidebar-tab-height * 1})

    .menu-tab label
      color: $light-orange

    .menu-tab
      pointer-events: none

  .version
    font-family: $condensed-font
    font-size: 14px
    font-weight: 300
    color: rgba(#fff, 0.2)
    position: fixed
    top: 0
    left: $sidebar-width - 20px
    transform: translateX(-100%)
    pointer-events: none
    padding: 10px
    background: rgba(#383838, 0.8)
    z-index: 5

  &.show-filter .menu-sections
    height: calc(100% - #{$sidebar-account-menu-height + $filter-height})

.show-bottom-alert .sidebar
  height: calc(100% - (#{$header-height} + 65px))


