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

#root
  --nav-btn-width: 30px
  --nav-btn-height: 30px
  --nav-btn-margin: var(--general-margin)
  --nav-delimiter-size: 16px
  --nav-btn-fg: var(--toolbar-fg)
  --nav-btn-accent: var(--accent)
  --nav-btn-len-margin: 0px
  --nav-btn-border-radius: var(--general-border-radius)
  --nav-hidden-btn-border-radius: var(--general-border-radius)
  --nav-hidden-panels-popup-margin: 3px
#root[data-density="compact"]
  --nav-delimiter-size: 12px
  --nav-btn-width: 28px
  --nav-btn-height: 28px
  --nav-hidden-panels-popup-margin: 2px
  --nav-btn-len-margin: 0px
#root[data-density="loose"]
  --nav-btn-width: 32px
  --nav-btn-height: 32px
  --nav-btn-len-margin: 1px
#root[data-toolbar-color-scheme="dark"]
  --nav-btn-active-shadow: inset 0 0 0 1px var(--s-accent, #ffffff12), 0 1px 3px 0 #00000036
#root[data-toolbar-color-scheme="light"]
  --nav-btn-active-shadow: inset 0 0 0 1px var(--s-accent, #00000016), inset 0 1px 3px 0 #00000016

#root .NavigationBar
  --nav-btn-badge-left: 18px
  --nav-btn-bkm-badge-left: 16px
#root[data-density="compact"] .NavigationBar
  --nav-btn-badge-left: 17px
  --nav-btn-bkm-badge-left: 15px
#root[data-density="loose"] .NavigationBar
  --nav-btn-badge-left: 19px
  --nav-btn-bkm-badge-left: 17px

// ---
// -- Navigation
// -
.NavigationBar
  position: relative
  display: flex
  flex-shrink: 0
  background-color: var(--toolbar-bg)
  box-shadow: 0 0 0 1px var(--s-toolbar-border, transparent)
  &.-top
    width: 100%
    padding: var(--nav-btn-margin)
    z-index: 3000
  &.-vert
    width: 100%
    padding: calc(var(--nav-btn-margin) - var(--s-darker-border-width, 0px)) 0 0
    flex-direction: column
    align-items: center
    max-height: 100%
    &[data-layout="left"]
      flex-grow: 1
    &[data-layout="right"]
      flex-grow: 1

.PinnedTabsBar[data-empty="false"] + .NavigationBar[data-layout="left"]
  border-top-right-radius: var(--general-border-radius)
  padding: calc(var(--nav-btn-margin) + 1px) 0 0
  .main-items .nav-item:first-of-type
    border-top-right-radius: var(--general-border-radius)
.PinnedTabsBar[data-empty="false"] + .NavigationBar[data-layout="right"]
  border-top-left-radius: var(--general-border-radius)
  padding: calc(var(--nav-btn-margin) + 1px) 0 0
  .main-items .nav-item:first-of-type
    border-top-left-radius: var(--general-border-radius)

// ---
// -- Container of panels buttons
// -
.NavigationBar .main-items
  position: relative
  display: flex
  min-height: var(--nav-btn-height)
  flex-wrap: wrap
  flex-grow: 1
  flex-direction: row
  grid-gap: var(--nav-btn-margin)
.NavigationBar.-vert  .main-items
  flex-direction: column
  flex-wrap: nowrap
  max-height: 100%

// ---
// -- Navigational button
// -
.NavigationBar .nav-item
  position: relative
  display: flex
  width: var(--nav-btn-width)
  height: var(--nav-btn-height)
  justify-content: center
  align-items: center
  flex-shrink: 0
  z-index: 10
  border-radius: var(--nav-btn-border-radius)
  transition: opacity var(--d-fast), transform var(--d-fast), z-index var(--d-fast)

  // for dragenter zone and drop pointer
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    z-index: 1

  // for drop target
  &[data-drop-mode="before"]:before
    box-shadow: -1px 0 0 0 var(--nav-btn-accent)
  &[data-drop-mode="before"]:first-of-type:before
    box-shadow: inset 1px 0 0 0 var(--nav-btn-accent)
  &[data-drop-mode="after"]:before
    box-shadow: 1px 0 0 0 var(--nav-btn-accent)
  &[data-drop-mode="after"]:last-of-type:before
    box-shadow: inset -1px 0 0 0 var(--nav-btn-accent)
  &[data-drop-mode="in"]:before
    border-radius: var(--nav-btn-border-radius)
    box-shadow: inset 0 0 0 1px var(--nav-btn-accent)
  &[data-drop-mode="in"][data-type="hidden"]:before
    background-color: #00000012
    box-shadow: none
  &[data-drop-mode="in"][data-type="add"] svg
    fill: var(--nav-btn-accent)

  &:not([data-class="space"]):hover
    background-color: var(--toolbar-el-overlay-hover-bg)

  &[data-active="true"]
    background-color: var(--toolbar-el-overlay-hover-bg)
    box-shadow: var(--nav-btn-active-shadow)

  &:not([data-class="space"]):active
    background-color: var(--toolbar-el-overlay-clicked-bg)

  &[data-loading="true"]
    cursor: progress

  &[data-sel="true"]
  &[data-sel="true"]:hover
    opacity: 1
    background-color: var(--toolbar-el-overlay-selected-bg)
    box-shadow: inset 0 0 0 1px var(--toolbar-el-overlay-selected-border)

  &[data-class="space"]
    opacity: 1
    &[data-type="dynamic"]
      flex-grow: 1
    &[data-type="static"]:after
      content: ''
      position: absolute
      background-color: var(--s-frame-bg, var(--border))

  &[data-unloaded="true"] > *
    opacity: .3

.NavigationBar .hidden-panels-popup .nav-item
  width: auto
  border-radius: var(--nav-hidden-btn-border-radius)
  &[data-drop-mode="in"]:before
    border-radius: var(--nav-hidden-btn-border-radius)

.NavigationBar.-top .nav-item[data-class="space"][data-type="dynamic"]
.NavigationBar.-bottom .nav-item[data-class="space"][data-type="dynamic"]
  width: auto
.NavigationBar.-top .nav-item[data-class="space"][data-type="static"]
.NavigationBar.-bottom .nav-item[data-class="space"][data-type="static"]
  width: var(--nav-delimiter-size)
  &:after
    width: 1px
    height: 16px
    top: calc(50% - 8px)
    left: 50%
.NavigationBar.-vert .nav-item[data-class="space"][data-type="dynamic"]
  height: auto
.NavigationBar.-vert .nav-item[data-class="space"][data-type="static"]
  height: var(--nav-delimiter-size)
  &:after
    width: 16px
    height: 1px
    top: 50%
    left: calc(50% - 8px)

.NavigationBar[data-layout="wrap"][data-overflowed="true"] .nav-item
  flex-grow: 1
  &[data-class="space"]
    flex-grow: 0
    width: 0

.NavigationBar[data-hidden-panels-bar="true"] .nav-item[data-type="hidden"]
  background-color: var(--toolbar-el-overlay-selected-bg)
  box-shadow: inset 0 0 0 1px var(--toolbar-el-overlay-selected-border)

// Drag and drop pointer for vertical list
.NavigationBar.-vert .nav-item[data-drop-mode="before"]:before
.NavigationBar .hidden-panels-popup .nav-item[data-drop-mode="before"]:before
  box-shadow: 0 -1px 0 0 var(--nav-btn-accent)
.NavigationBar.-vert .nav-item[data-drop-mode="before"]:first-of-type:before
  box-shadow: inset 0 1px 0 0 var(--nav-btn-accent)
.NavigationBar.-vert .nav-item[data-drop-mode="after"]:before
.NavigationBar .hidden-panels-popup .nav-item[data-drop-mode="after"]:before
  box-shadow: 0 1px 0 0 var(--nav-btn-accent)
.NavigationBar.-vert .nav-item[data-drop-mode="after"]:last-of-type:before
  box-shadow: inset 0 -1px 0 0 var(--nav-btn-accent)

.NavigationBar[data-layout="inline"] .main-items .nav-item
  position: absolute

  &[data-index="-1"]
    display: flex
    opacity: 0
    z-index: -1
    transform: scale(0, 0)
  
  // Button x position
  for i in 0..24
    &[data-index=\"{i}\"]
      transform: "translateX(calc((var(--nav-btn-width) + var(--nav-btn-margin)) * %s))" % i

.NavigationBar.-vert .nav-item[data-type="hidden"] > svg
  transform: rotateZ(-90deg)

.NavigationBar.-bottom .nav-item[data-type="hidden"] > svg
  transform: rotateZ(180deg)

.NavigationBar.-vert[data-layout="right"] .nav-item[data-type="hidden"] > svg
  transform: rotateZ(90deg)

// ---
// -- Nav button icon
// -
.NavigationBar .nav-item .icon
  position: relative
  width: 16px
  height: 16px
  flex-shrink: 0
  fill: var(--color, var(--nav-btn-fg))
  transform: translateZ(0)
  transition: opacity var(--d-fast)
  margin: 0 calc((var(--nav-btn-width) - 16px) / 2)

.NavigationBar .nav-item[data-class="btn"] .icon
  fill: var(--nav-btn-fg)

.NavigationBar .nav-item[data-updated="true"] > .icon
  mask: radial-gradient(
    circle at calc(100% - 2px) calc(100% - 2px),
    #00000024,
    #00000024 4px,
    #000000 5px,
    #000000
  )

// ---
// -- Sub icon
// -
.NavigationBar .nav-item .bookmarks-badge-icon
  position: absolute
  width: 10px
  height: 10px
  top: calc(50% + 1px)
  left: var(--nav-btn-bkm-badge-left)
  fill: var(--color, var(--toolbar-fg))
.NavigationBar .nav-item:not([data-unloaded="true"]) .bookmarks-badge-icon
  opacity: .7

.NavigationBar .nav-item .bookmarks-badge-icon + .icon
  clip-path: polygon(0% 0, 100% 0%, 100% 50%, 81.25% 50%, 62.5% 62.5%, 62.5% 100%, 0% 100%)

// ---
// -- Panel name
// -
.NavigationBar .nav-item .name-box
  display: none
.NavigationBar .hidden-panels-popup .nav-item .name-box
  position: relative
  display: block
  margin: 0 calc(var(--nav-btn-width) / 2 - 4px) 0 -1px
  flex-grow: 1
  overflow: hidden
.NavigationBar .nav-item .name
  position: relative
  color: var(--color, var(--nav-btn-fg))
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  font-size: rem(15)

// ---
// -- Update / Highlight badge
// -
.NavigationBar .nav-item .badge
  position: absolute
  top: calc(50% + 3px)
  left: var(--nav-btn-badge-left)
  width: 6px
  height: 6px
  border-radius: 50%
  background-color: var(--nav-btn-accent)
  opacity: 0
  transform: scale(0.7, 0.7)
  transition: opacity var(--d-norm), transform var(--d-norm), background-color var(--d-norm)

.NavigationBar .nav-item[data-updated="true"] .badge
  opacity: 1
  transform: scale(1, 1)

// ---
// -- Audio badge
// -
.NavigationBar .nav-item .audio
  position: absolute
  bottom: 0
  right: 0
  width: 14px
  height: 14px
  border-radius: calc(var(--nav-btn-border-radius) - 1px)
  background-color: var(--toolbar-bg)
  box-shadow: inset 0 0 0 1px #0003
  z-index: 1
  animation: appearing-animation var(--d-fast)
  > svg
    position: absolute
    top: 1px
    left: 1px
    width: 12px
    height: 12px
    fill: var(--toolbar-fg)
    opacity: 0
    transition: opacity var(--d-fast)
  &:hover
    opacity: .7
  &:active
    opacity: .5
.NavigationBar .nav-item[data-audible="true"] .audio .-audible
  opacity: 1
.NavigationBar .nav-item[data-paused="true"] .audio .-paused
  opacity: 1
.NavigationBar .nav-item[data-muted="true"] .audio .-muted
  opacity: 1

// ---
// -- Length of panel
// -
.NavigationBar .nav-item .len
  position: absolute
  top: var(--nav-btn-len-margin)
  right: var(--nav-btn-len-margin)
  font-size: rem(9)
  font-weight: 500
  padding: 0 2px
  color: var(--nav-btn-fg)
  text-shadow: 0 0 2px var(--toolbar-bg),
               0 0 2px var(--toolbar-bg),
               0 0 3px var(--toolbar-bg),
               0 0 3px var(--toolbar-bg)
  border-radius: 4px
  transform: translateZ(0)

.NavigationBar .nav-item[data-empty="true"] .len
  opacity: .5

.hidden-panels-popup .nav-item .len
  padding: 1px 3px

// ---
// -- Static controls for inline layout
// -
.static-btns
  position: relative
  display: flex
  flex-shrink: 0
  grid-gap: 0 var(--nav-btn-margin)

// ---
// -- Hidden panels bar
// -
.NavigationBar .hidden-panels-popup-layer
  position: absolute
  &:before
    content: ''
    position: absolute
    top: -50vh
    left: -50vw
    width: 200vw
    height: 200vh
    background-color: #0003

.NavigationBar.-top .hidden-panels-popup-layer
  width: 100%
  height: 0
  top: 100%
  left: 0
.NavigationBar.-vert .hidden-panels-popup-layer
  width: calc(100vw - 100%)
  height: 100%
  bottom: 0
.NavigationBar.-vert[data-layout="left"] .hidden-panels-popup-layer
  left: 100%
.NavigationBar.-vert[data-layout="right"] .hidden-panels-popup-layer
  right: 100%

.NavigationBar .hidden-panels-popup
  position: absolute
  display: flex
  flex-direction: column
  max-height: 50vh
  border-radius: calc(var(--nav-hidden-btn-border-radius) + var(--nav-btn-margin))
  overflow: hidden
  overflow-y: auto
  background-color: var(--toolbar-bg)
  box-shadow: 0 0 12px 0 #00000056,
              0 0 0 1px var(--border)

.NavigationBar.-top .hidden-panels-popup
  max-width: calc(100vw - var(--nav-btn-width) - var(--nav-hidden-panels-popup-margin) * 2 - 6px)
  &:before
    box-shadow: inset 0 3px 3px -3px #00000024
.NavigationBar.-vert .hidden-panels-popup
  max-width: calc(100% - var(--nav-hidden-panels-popup-margin) * 2)
  flex-direction: column

.NavigationBar.-vert[data-layout="right"] .hidden-panels-popup
  box-shadow: 0 0 12px 0 #00000056,
              0 0 0 1px var(--border)

// Vertical offset
.NavigationBar.-vert[data-layout="left"] .hidden-panels-popup
  left: var(--nav-hidden-panels-popup-margin)
.NavigationBar.-vert[data-layout="right"] .hidden-panels-popup
  right: var(--nav-hidden-panels-popup-margin)
.NavigationBar.-vert .hidden-panels-popup[data-offset-side="start"]
  top: var(--offset)
.NavigationBar.-vert .hidden-panels-popup[data-offset-side="end"]
  bottom: var(--offset)

// Horizontal offset
.NavigationBar.-top .hidden-panels-popup
  top: 3px
.NavigationBar.-top .hidden-panels-popup[data-offset-side="start"]
  left: var(--offset)
  max-width: calc(100vw - var(--nav-hidden-panels-popup-margin) * 2 - var(--offset))
.NavigationBar.-top .hidden-panels-popup[data-offset-side="end"]
  right: var(--offset)
  max-width: calc(100vw - var(--nav-hidden-panels-popup-margin) * 2 - var(--offset))

.NavigationBar .hidden-panels-popup-content
  position: relative
  display: flex
  flex-direction: column
  grid-gap: var(--nav-btn-margin)
  padding: var(--nav-btn-margin)
  overflow: hidden
  overflow-y: auto
  scrollbar-color: var(--toolbar-scrollbar-color) #0000
#root[data-native-scrollbars-thin="true"] .NavigationBar .hidden-panels-popup-content
  scrollbar-width: thin

.NavigationBar
  .hidden-panels-enter-active
  .hidden-panels-leave-active
    transition: z-index var(--d-fast), opacity var(--d-fast)
    .hidden-panels-popup
      transition: opacity var(--d-fast), transform var(--d-fast)
  .hidden-panels-enter-from
  .hidden-panels-leave-to
    opacity: 0
    z-index: 0
    .hidden-panels-popup
      transform: translateY(-4px)

.NavigationBar.-vert[data-layout="left"] .hidden-panels-enter-from .hidden-panels-popup
.NavigationBar.-vert[data-layout="left"] .hidden-panels-leave-to .hidden-panels-popup
  transform: translateX(-4px)

.NavigationBar.-vert[data-layout="right"] .hidden-panels-enter-from .hidden-panels-popup
.NavigationBar.-vert[data-layout="right"] .hidden-panels-leave-to .hidden-panels-popup
  transform: translateX(4px)
