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

#root
  --bookmarks-indent: 12px
  --bookmarks-bookmark-height: 30px
  --bookmarks-folder-height: 30px
  --bookmarks-separator-height: 17px
  --bookmarks-bookmark-font: rem(15) sans-serif
  --bookmarks-folder-font: rem(15) sans-serif
  --bookmarks-margin: var(--general-margin)
  --bookmarks-border-radius: var(--general-border-radius)
  --bookmarks-inner-gap: 6px
  --bookmarks-open-mark-top: 3px
  --bookmarks-open-mark-left: 3px
  --bookmarks-node-activated-fg: var(--frame-fg)
#root[data-density="compact"]
  --bookmarks-indent: 10px
  --bookmarks-bookmark-height: 28px
  --bookmarks-folder-height: 28px
  --bookmarks-separator-height: 15px
  --bookmarks-inner-gap: 5px
  --bookmarks-open-mark-top: 2px
  --bookmarks-open-mark-left: 2px
#root[data-density="loose"]
  --bookmarks-indent: 12px
  --bookmarks-bookmark-height: 32px
  --bookmarks-folder-height: 32px
  --bookmarks-separator-height: 19px
  --bookmarks-inner-gap: 6px
#root[data-theme="proton"][data-frame-color-scheme="dark"]
#root.Setup[data-toolbar-color-scheme="dark"]
  --bookmarks-expanded-folder-bg: #ffffff08
  --bookmarks-expanded-folder-shadow: 0 2px 6px -2px #00000048,
                                     inset 0 0 0 1px #ffffff08
#root[data-theme="proton"][data-frame-color-scheme="light"]
#root.Setup[data-toolbar-color-scheme="light"]
  --bookmarks-expanded-folder-bg: #ffffff48
  --bookmarks-expanded-folder-shadow: 0 2px 6px -2px #00000036

.BookmarkNode
  position: relative
  &.root-node
    margin: 0 var(--bookmarks-margin)

// ---
// -- Body
// -
.BookmarkNode > .body
  position: relative
  top: 0
  display: flex
  align-items: center
  cursor: default
  padding: 0 0 var(--bookmarks-margin) var(--bookmarks-inner-gap)
  transform: translateZ(0)
  transition: opacity var(--d-fast)
  background-color: var(--frame-bg)
  box-sizing: border-box
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: calc(100% - var(--bookmarks-margin))
    border-radius: var(--bookmarks-border-radius)
    background-color: var(--frame-el-bg)
    box-shadow: var(--frame-el-shadow)

.BookmarkNode[data-type="bookmark"] > .body
  height: calc(var(--bookmarks-bookmark-height) + var(--bookmarks-margin))
.BookmarkNode[data-type="folder"] > .body
  height: calc(var(--bookmarks-folder-height) + var(--bookmarks-margin))
.BookmarkNode[data-type="separator"] > .body
  height: calc(var(--bookmarks-separator-height) + var(--bookmarks-margin))
  &:after
    content: ''
    position: absolute
    top: calc(50% - 1px)
    left: 8px
    width: calc(100% - 16px)
    height: 1px
    background-color: var(--frame-fg)
    opacity: .3

.BookmarkNode[data-expanded="true"] > .body
  z-index: 1

.BookmarkNode[data-expanded="true"] > .body:before
  background-color: var(--bookmarks-expanded-folder-bg, var(--frame-el-bg))
  box-shadow: var(--bookmarks-expanded-folder-shadow, var(--frame-el-shadow))

.BookmarkNode > .body:hover:before
  background-color: var(--frame-el-overlay-hover-bg)
  opacity: 1

.BookmarkNode > .body:active:before
  background-color: var(--frame-el-overlay-clicked-bg)
  opacity: 1

.BookmarkNode[data-selected="true"] > .body:before
  background-color: var(--frame-el-overlay-selected-bg)
  box-shadow: inset 0 0 0 1px var(--frame-el-overlay-selected-border)

.BookmarkNode[data-open="true"] > .body:after
  content: ''
  position: absolute
  top: var(--bookmarks-open-mark-top)
  left: var(--bookmarks-open-mark-left)
  width: 3px
  height: 3px
  border-radius: 50%
  background-color: var(--frame-fg)
  z-index: 30
.BookmarkNode[data-open="true"][data-expanded="true"] > .body:after
  background-color: var(--bookmarks-node-activated-fg)

#root[data-sticky-bookmarks="true"]:not([data-drag="true"])
  .BookmarkNode[data-expanded="true"] > .body
    position: sticky

  // Sticky lvl: 1
  .BookmarkNode.root-node[data-expanded="true"] > .body
    z-index: 1
    top: 0

  // Sticky lvl: 2
  .BookmarkNode.root-node[data-expanded="true"] > .children > .BookmarkNode[data-expanded="true"] > .body
    z-index: 2
    top: calc(var(--bookmarks-folder-height) + var(--bookmarks-margin))

  // Sticky lvl: 3
  .BookmarkNode.root-node[data-expanded="true"] > .children > .BookmarkNode[data-expanded="true"] > .children > .BookmarkNode[data-expanded="true"] > .body
    z-index: 3
    top: calc((var(--bookmarks-folder-height) + var(--bookmarks-margin)) * 2)

  // Sticky lvl: 4
  .BookmarkNode.root-node[data-expanded="true"] > .children > .BookmarkNode[data-expanded="true"] > .children > .BookmarkNode[data-expanded="true"] > .children > .BookmarkNode[data-expanded="true"] > .body
    z-index: 4
    top: calc((var(--bookmarks-folder-height) + var(--bookmarks-margin)) * 3)

  // Sticky lvl: 5
  .BookmarkNode.root-node[data-expanded="true"] > .children > .BookmarkNode[data-expanded="true"] > .children > .BookmarkNode[data-expanded="true"] > .children > .BookmarkNode[data-expanded="true"] > .children > .BookmarkNode[data-expanded="true"] > .body
    z-index: 5
    top: calc((var(--bookmarks-folder-height) + var(--bookmarks-margin)) * 4)

// ---
// -- Drag layer
// -
.BookmarkNode .body .dnd-layer
  z-index: 15
#root[data-drag="true"] .BookmarkNode .body .dnd-layer
  width: 100vw
  left: auto
  right: 0

// ---
// -- Favicon
// -
.BookmarkNode .fav
  position: relative
  width: 16px
  height: 16px
  flex-shrink: 0
  margin: 0 4px 0 0
  z-index: 20
  transition: opacity var(--d-fast), transform var(--d-fast)

.BookmarkNode .fav > svg
.BookmarkNode .fav > img
  position: absolute
  top: 0
  left: 0
  width: 16px
  height: 16px
  fill: var(--frame-fg)
.BookmarkNode .fav > svg
  opacity: .7
.BookmarkNode[data-type="folder"][data-parent="false"] > .body > .fav > svg
  opacity: .5

.BookmarkNode[data-expanded="true"] > .body > .fav > svg
  fill: var(--bookmarks-node-activated-fg)

// ---
// -- Title
// -
.BookmarkNode .title
  position: relative
  width: 100%  
  white-space: nowrap
  overflow: hidden
  margin-right: 3px
  padding: 3px 0
  color: var(--frame-fg)
  mask: linear-gradient(-90deg, transparent, #000000 12px, #000000)

.BookmarkNode[data-type="bookmark"] > .body > .title
  font: var(--bookmarks-bookmark-font)

.BookmarkNode[data-type="folder"] > .body > .title
  font: var(--bookmarks-folder-font)

.BookmarkNode[data-expanded="true"] > .body > .title
  color: var(--bookmarks-node-activated-fg)

// Empty folder
.BookmarkNode[data-type="folder"][data-parent="false"] > .body > .title
  opacity: .7

// ---
// -- Count of children
// -
.BookmarkNode .len
  position: relative
  font-size: rem(11)
  padding: 0 6px
  color: var(--frame-fg)
  opacity: .7

.BookmarkNode[data-expanded="true"] > .body > .len
  color: var(--bookmarks-node-activated-fg)

.BookmarksPopup .BookmarkNode .len
  display: none

// ---
// -- Children box
// -
.BookmarkNode .children
  position: relative
  padding: 0 0 0 var(--bookmarks-indent)
  transform: translateZ(0)

// ---
// -- Level ruler
// -
.BookmarkNode .children:before
  content: ''
  position: absolute
  top: 0
  left: calc(var(--bookmarks-indent) / 2)
  width: 1px
  height: calc(100% - 11px)
  background-color: var(--frame-fg)
  opacity: .1
  transition: opacity var(--d-slow)

.BookmarkNode .children:hover:before
  opacity: .3

.BookmarkNode[data-selected="true"] .children:before
  opacity: .7
