@import '../../../utils'

.BookmarksSubPanel
  position: relative
  display: flex
  flex-direction: column
  width: 100%
  height: 100%
  overflow: hidden
  min-height: 150px

#root[data-sticky-bookmarks="true"]:not([data-drag="true"]) .BookmarksSubPanel .ScrollBox .top-shadow
  display: none

.BookmarksSubPanel .nav
  position: relative
  display: flex
  justify-content: center
  align-items: center
  width: 100%
  height: var(--bottom-bar-height)
  background-color: var(--toolbar-bg)

.BookmarksSubPanel .nav .up-btn
.BookmarksSubPanel .nav .down-btn
  position: relative
  width: 50%
  height: var(--bottom-bar-height)
  flex-shrink: 0
  z-index: 1
  &:before
    content: ''
    position: absolute
    top: 2px
    width: calc(var(--bottom-bar-height) - 4px)
    height: calc(100% - 4px)
    background-color: var(--toolbar-fg)
    border-radius: 4px
    opacity: 0
  > svg
    position: absolute
    top: calc(var(--bottom-bar-height) / 2 - 8px)
    width: 16px
    height: 16px
    fill: var(--toolbar-fg)
    opacity: .7
    transform: rotateZ(-90deg)
  &:hover
    &:before
      opacity: .2
    > svg
      opacity: 1
  &:active
    &:before
      opacity: .1
    > svg
      opacity: .7
  &[data-inactive="true"]
    opacity: .3
    cursor: default
    > svg
      opacity: .7
    &:before
      opacity: 0
.BookmarksSubPanel .nav .down-btn
  > svg
    right: calc(var(--bottom-bar-height) / 2 - 8px)
  &:before
    right: 2px
.BookmarksSubPanel .nav .up-btn
  > svg
    left: calc(var(--bottom-bar-height) / 2 - 8px)
    transform: rotateZ(90deg)
  &:before
    left: 2px

.BookmarksSubPanel .nav .title-block
  position: absolute
  width: calc(100% - var(--bottom-bar-height) * 2)
  left: var(--bottom-bar-height)
  padding: 0 2px
  overflow: hidden

.BookmarksSubPanel .nav .title
  position: relative
  font-size: rem(14)
  font-weight: 700
  text-align: center
  color: var(--toolbar-fg)
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.BookmarksSubPanel .content
  position: relative
  display: flex
  flex-direction: column
  flex-grow: 1
  padding-top: var(--general-margin)
  height: calc(100% - var(--bottom-bar-height))
  width: 100%
  background-color: var(--frame-bg)
  overflow: hidden


.BookmarksSubPanel .bookmarks-tree
  position: relative
  padding: 0 0 40px 0
  min-height: 120px

.BookmarksSubPanel .loading-screen
  position: relative
  width: 100%
  height: 100%
  background-color: var(--frame-bg)
  min-height: 100px
