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

#root
  --bookmarks-sub-panel-height: 66vh

.SubPanel
  --nav-height: 30px

  position: absolute
  width: 100%
  height: 100%
  flex-shrink: 0
  z-index: -1
  overflow: hidden
  transition: z-index var(--d-fast) var(--d-fast)
.SubPanel[data-active="true"]
  z-index: 200
  transition: z-index var(--d-fast)

.SubPanel .overlay
  position: absolute
  width: 100%
  height: 100vh
  background-color: var(--frame-bg)
  opacity: 0
  transition: opacity var(--d-fast)
.SubPanel[data-active="true"] .overlay
  opacity: .7

.SubPanel .sub-panel
  position: absolute
  display: flex
  flex-direction: column
  top: 100%
  max-height: var(--bookmarks-sub-panel-height)
  width: 100%
  background-color: var(--frame-bg)
  transition: transform var(--d-fast)
  overflow: hidden
.SubPanel[data-active="true"] .sub-panel
  transform: translateY(-100%)
  box-shadow: 0 0 8px 0 #00000032

.SubPanel .header
  position: relative
  display: flex
  justify-content: center
  align-items: center
  background-color: var(--toolbar-bg)
  width: 100%
  height: 30px
  flex-shrink: 0

.SubPanel .header > .title
  position: relative
  font-size: rem(14)
  font-weight: 700
  color: var(--toolbar-fg)
