.root
  absolute top left bottom
  width $sideNav-width
  background-color #2E3235
  user-select none
  color $ui-text-color
  height: 100vh
  display: flex
  flex-direction column

.top
  padding-bottom 15px

.top-menu-preference
  navButtonColor()
  position absolute
  top 22px
  right 10px
  width 2em
  background-color transparent
  &:hover
    color $ui-button-default--active-backgroundColor
    background-color transparent
  &:active, &:active:hover
    color $ui-button-default--active-backgroundColor
    background-color transparent

.switch-buttons
  background-color transparent
  border 0
  height 25px
  margin 20px auto 0px 8px

.non-active-button
  color $ui-inactive-text-color
  font-size 16px
  border 0
  background-color transparent
  transition 0.2s
  &:hover
    color alpha(#239F86, 60%)

.active-button
  @extend .non-active-button
  color $ui-button-default--active-backgroundColor

.top-menu-label
  margin-left 5px
  overflow ellipsis
  opacity 0

.tabBody
  flex 1
  display flex
  flex-direction column

.tag-title
  padding-left 15px
  padding-bottom 13px
  p
    color $ui-text-color

.tagList
  overflow-y auto
  flex: 1

.root--folded
  height 100vh
  width $sideNav--folded-width
  .switch-buttons
    display none
  .top
    height 60px
  .top-menu
    position static
    width $sideNav--folded-width
    height 60px
    text-align center
    &:hover .top-menu-label
      transition opacity 0.15s
      opacity 1
  .top-menu-label
    position fixed
    display inline-block
    height 30px
    left $sideNav--folded-width
    padding 0 10px
    margin-top -8px
    opacity 0
    margin-left 0
    overflow hidden
    z-index 10
    color white
    line-height 30px
    border-top-right-radius 2px
    border-bottom-right-radius 2px
    pointer-events none
    font-size 13px

body[data-theme="white"]
  .root, .root--folded
    background-color #f9f9f9
    color $ui-text-color

  .top-menu-preference
    navWhiteButtonColor()
    &:hover
      color #0B99F1
    &:active, &:active:hover
      color #0B99F1

  .non-active-button
    color $ui-inactive-text-color
    &:hover
      color alpha(#0B99F1, 60%)

  .tag-title
    p
      color $ui-text-color

  .non-active-button
    &:hover
      color alpha(#0B99F1, 60%)

  .active-button
    @extend .non-active-button
    color #0B99F1

body[data-theme="dark"]
  .root, .root--folded
    border-color $ui-dark-borderColor
    background-color $ui-dark-backgroundColor
    color $ui-dark-text-color

  .top
    border-color $ui-dark-borderColor

  .top-menu-preference
    navDarkButtonColor()
    &:active
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
    &:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)

  .non-active-button
    color alpha($ui-dark-text-color, 60%)
    &:hover
      color alpha(#0B99F1, 60%)

  .tag-title
    p
      color alpha($ui-dark-text-color, 60%)