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

.top
  padding-bottom 15px

.top-menu
  navButtonColor()
  position absolute
  top 22px
  right 5px
  &:hover
    color $ui-text-color
  &:active, &:active:hover
    color $ui-text-color
    background-color alpha($ui-button--active-backgroundColor, 20%)

.switch-buttons
  background-color transparent
  border 1px solid $ui-borderColor
  width 110px
  height 25px
  margin 20px auto 0px auto
  border-radius 1px

.non-active-button
  navButtonColor()
  font-weight 600
  width 54px
  height 23px

.active-button
  @extend .non-active-button
  background-color $ui-button--active-backgroundColor
  color $ui-text-color
  &:hover
    background-color alpha($ui-button--active-backgroundColor, 70%)
    color alpha($ui-text-color, 70%)
  &:active, &:active:hover
    background-color $ui-button--active-backgroundColor

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

.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
  .switch-buttons
    display none
  .top
    height 60px
  .top-menu
    position static
    width 43px
    height 60px
    text-align center

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
    navDarkButtonColor()
    &:active
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
    &:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)

  .switch-buttons
    border-color $ui-dark-borderColor

  .non-active-button
    navDarkButtonColor()

  .active-button
    @extend .non-active-button
    background-color $ui-dark-button--active-backgroundColor
    color $ui-dark-text-color
    &:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 70%)
      color alpha($ui-dark-text-color, 70%)
    &:active
      color $ui-dark-text-color
      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
    &:active, &:active:hover
      color $ui-dark-text-color
      background-color $ui-dark-button--active-backgroundColor

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