.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
  display flex
  align-items top
  justify-content space-between
  padding-bottom 10px
  margin 14px 14px 4px

.switch-buttons
  background-color transparent
  border 0
  display flex
  align-items center
  text-align center

.extra-buttons
  position relative
  display flex
  align-items center

.search
  position relative
  flex 1
  display flex
  max-height 0
  overflow hidden
  transition max-height .4s
  margin -5px 10px 0
  .search-input
    flex 1
    height 2em
    vertical-align middle
    font-size 14px
    border solid 1px $border-color
    border-radius 2px
    padding 2px 6px
    outline none
  .search-clear
    width 10px
    position absolute
    right 8px
    top 9px
    cursor pointer

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

.tabBody
  flex 1
  display flex
  flex-direction column

.tag-control
  display flex
  height 30px
  line-height 25px
  overflow hidden
  .tag-control-title
    padding-left 15px
    padding-bottom 13px
    flex 1
    p
      color $ui-button-default-color
  .tag-control-sortTagsBy
    user-select none
    font-size 12px
    color $ui-inactive-text-color
    margin-left 12px
    margin-right 12px
    .tag-control-sortTagsBy-select
      appearance: none;
      margin-left 5px
      color $ui-inactive-text-color
      padding 0
      border none
      background-color transparent
      outline none
      cursor pointer
      font-size 12px

.tagList
  overflow-y auto
  flex: 1

.root--folded
  height 100vh
  width $sideNav--folded-width
  background-color #2E3235
  .switch-buttons
    display none
  .extra-buttons > button:first-of-type // hide search icon
    display none
  .top
    height 60px
    align-items center
    margin 0
    justify-content center
    position relative
    left -4px
  .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
  .top-menu-preference
    position absolute
    left 7px
  .search
    height 28px
    .search-input
      display none
    .search-clear
      display none
    .search-folded
      width 16px
      padding-left 4px
      margin-bottom 8px
      cursor pointer

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

body[data-theme="dark"]
  .root, .root--folded
    border-right 1px solid $ui-dark-borderColor
    background-color $ui-dark-backgroundColor
    color $ui-dark-text-color
  .search .search-input
    background-color $ui-dark-backgroundColor
    color $ui-dark-text-color
    border-color $ui-dark-borderColor

  .top
    border-color $ui-dark-borderColor

apply-theme(theme)
  body[data-theme={theme}]
    .root, .root--folded
      background-color get-theme-var(theme, 'backgroundColor')
      border-right 1px solid get-theme-var(theme, 'borderColor')

    .search .search-input
      background-color get-theme-var(theme, 'backgroundColor')
      color get-theme-var(theme, 'text-color')
      border-color get-theme-var(theme, 'borderColor')

for theme in 'solarized-dark' 'dracula'
  apply-theme(theme)

for theme in $themes
  apply-theme(theme)