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

@import '../vars'
@import '../btn'
@import '../animations'
@import '../inputs'
@import '../upgrade-screen'

@import './scroll-box'
@import './tab'
@import './bookmark-card'
@import './bookmark-node'
@import './bar.pinned-tabs'
@import './bar.navigation'
@import './bar.search'
@import './bar.panel-view-switcher'
@import './panel.tabs'
@import './panel.bookmarks'
@import './panel.history'
@import './popup'
@import './popup.windows'
@import './popup.confirm'
@import './popup.context-menu'
@import './popup.notifications'
@import './popup.bookmarks'
@import './popup.panel-config'
@import './popup.container-config'
@import './popup.group-config'
@import './popup.dialog'
@import './popup.new-tab-shortcuts'
@import './popup.site-config'
@import './loading-dots'
@import './panel-placeholder'
@import './sub-list-title'
@import './sub-panel'
@import './sub-panel.bookmarks'
@import './sub-panel.closed-tabs'

html
  position: relative
  height: 100%

body
  position: relative
  width: 100%
  height: 100%
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  padding: 0
  margin: 0
  color-scheme: light dark

  a
    text-decoration: none

:focus
  outline: none

::-moz-focus-inner
  border: 0

.hidden, .hidden-assets
  position: absolute
  top: 0
  left: 0
  width: 0
  height: 0
  overflow: hidden
  opacity: 0

#root_container
  position: relative
  width: 100%
  height: 100%

#root
  position: relative
  display: flex
  width: 100%
  height: 100%
  flex-direction: column
  overflow: clip
  background-color: var(--frame-bg)
  flex-direction: column
  // padding-top: var(--s-top-padding, 0px)

.top-horizontal-box
  position: relative
  display: flex
  flex-direction: column
  margin-bottom: var(--general-margin)

.main-box
  position: relative
  display: flex
  width: 100%
  height: 100%
  flex-direction: row

.central-box
  position: relative
  display: flex
  flex-direction: column
  width: 0
  height: 100%
  flex-grow: 1
  flex-shrink: 1
  overflow: clip
// If .main-box is the first element, set margin top
.Notifications + .main-box .central-box
  height: calc(100% + var(--s-darker-border-width, 0px) - var(--general-margin))
  margin-top: calc(var(--general-margin) - var(--s-darker-border-width, 0px))

.main-box .left-vertical-box
  position: relative
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  flex-shrink: 0
  z-index: 300

.main-box .right-vertical-box
  position: relative
  display: flex
  flex-direction: column
  flex-shrink: 0
  z-index: 300

// ---
// -- Panels
// -
.panel-box
  position: relative
  width: 100%
  height: 100%
  flex-grow: 1
  flex-shrink: 1

.panel
  position: absolute
  display: flex
  top: 0
  left: 0
  width: 100%
  height: 100%
  flex-direction: column
  z-index: 10
  transition: transform var(--d-fast), opacity var(--d-fast), z-index var(--d-fast)
  &[data-pos="center"]
    transform: translateX(0)
    z-index: 10
    opacity: 1
  &[data-pos="left"]
    transform: translateX(-50%)
    opacity: 0
    z-index: 0
  &[data-pos="right"]
    transform: translateX(50%)
    opacity: 0
    z-index: 0

.overlay-panel-enter-active
.overlay-panel-leave-active
  transition: transform var(--d-fast), opacity var(--d-fast), z-index var(--d-fast)
.overlay-panel-enter-from
  transform: translateY(10%)
  z-index: 0
  opacity: 0
.overlay-panel-enter-to
  transform: translateY(0)
  opacity: 1
  z-index: 100
.overlay-panel-leave-from
  transform: translateY(0)
  opacity: 1
  z-index: 100
.overlay-panel-leave-to
  transform: translateY(10%)
  z-index: 0
  opacity: 0

// ---
// -- Bottom bar
// -
.BottomBar
  position: absolute
  display: flex
  width: 100%
  bottom: 0
  flex-shrink: 0
  z-index: 10
  grid-gap: var(--general-margin)
  padding: 0 var(--general-margin) var(--general-margin)

.Sidebar .tool-btn
  position: relative
  display: flex
  justify-content: center
  align-items: center
  width: 100%
  min-width: var(--tabs-height)
  height: var(--tabs-height)
  border-radius: var(--general-border-radius)
  background-color: var(--frame-el-bg)
  box-shadow: var(--frame-el-shadow)
  transition: opacity var(--d-fast)
  > svg
    position: relative
    width: 16px
    height: 16px
    fill: var(--frame-fg)
    opacity: .7
  &:before
    content: ''
    position: absolute
    width: 100%
    height: 100%
    border-radius: var(--general-border-radius)
  &:hover
    > svg
      opacity: 1
    &:before
      background-color: var(--frame-el-overlay-hover-bg)
  &:active:before
    background-color: var(--frame-el-overlay-clicked-bg)
  &[data-disabled="true"]
    pointer-events: none
    box-shadow: none
    > svg
      opacity: .3
.BottomBar[data-with-ntb="true"] .tool-btn
  width: var(--tabs-height)

.BottomBar[data-drop-target-bookmarks="true"]
  z-index: 300
.BottomBar[data-drop-target-bookmarks="true"] .tool-btn
  opacity: 0
.BottomBar[data-drop-target-bookmarks="true"] .tool-btn.-bookmarks
  opacity: 1
  background-color: var(--frame-el-bg, var(--frame-bg))
  box-shadow: var(--frame-el-shadow, var(--active-el-shadow))
  > svg
    opacity: 1
  &:before
    background-color: var(--frame-el-overlay-hover-bg)
  &:after
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    z-index: 1
    border-radius: var(--nav-btn-border-radius)
    box-shadow: inset 0 0 0 1px var(--nav-btn-accent)

.bottom-bar-enter-active
.bottom-bar-leave-active
  transition: opacity var(--d-fast), transform var(--d-fast)
.bottom-bar-leave-active
.bottom-bar-enter-from
  opacity: 0
  transform: translateY(100%)

// ---
// -- Drag image
// -
.drag-image
  position: absolute
  bottom: 100%
  right: 100%
  max-width: 250px
  padding: 5px 8px 6px
  box-shadow: inset 0 0 0 1px var(--toolbar-fg)
  border-radius: 3px
  background-color: var(--toolbar-bg)
  white-space: nowrap
  transform: translateZ(0)

  .drag-image-title
    width: 100%
    font-size: rem(15)
    color: var(--toolbar-fg)
    overflow: hidden
    text-overflow: ellipsis

  .drag-image-info
    width: 100%
    font-size: rem(11)
    color: var(--toolbar-fg)
    white-space: pre
    overflow: hidden
    text-overflow: ellipsis

// ---
// -- Drag and Drop pointer
// -
.pointer
  position: absolute
  top: 0
  left: var(--pointer-left)
  width: 100%
  height: 24px
  z-index: -1
  opacity: 0
  transform: translateY(-100%)
  pointer-events: none
  mask: linear-gradient(-90deg, transparent, #000000 50%, #000000)
  &:after, &:before
    content: ''
    position: absolute
  &:after
    top: 11px
    left: 0
    width: 100%
    height: 2px
    background-color: var(--s-accent, var(--frame-el-overlay-selected-border))
    box-shadow: 3px 0 0 1px var(--frame-bg)
    opacity: 0
  &:before
    top: 8px
    left: 0
    width: 0
    height: 0
    border-left: 4px solid var(--s-accent, var(--frame-el-overlay-selected-border))
    border-right: 4px solid #00000000
    border-top: 4px solid #00000000
    border-bottom: 4px solid #00000000
  &[data-pointer="between"]:after
    opacity: 1
  &[data-pointer="none"]:before
  &[data-pointer="inside"]:after
  &[data-pointer="inside"]:before
    transform: translateX(100%)
    opacity: 0
  &[data-pointer="none"] .arrow
    opacity: 0
  &[data-hover="true"]:before
    transform: translateX(0)
    opacity: 1
    filter: contrast(200%)
#root[data-drag="true"] .pointer
  opacity: 1
  z-index: 1000
for i in 1..16
  .TabsPanel[data-pos="center"] .pointer[data-pointer="between"][data-lvl=\"{i}\"]:before
  .TabsPanel[data-pos="center"] .pointer[data-pointer="between"][data-lvl=\"{i}\"]:after
    transform: "translateX(calc(var(--tabs-indent) * %s + var(--tabs-margin)))" % i
for i in 1..16
  .BookmarksPanel[data-pos="center"] .pointer[data-pointer="between"][data-lvl=\"{i}\"]:before
  .BookmarksPanel[data-pos="center"] .pointer[data-pointer="between"][data-lvl=\"{i}\"]:after
    transform: "translateX(calc(var(--bookmarks-indent) * %s + var(--bookmarks-margin)))" % i
for i in 1..16
  .BookmarksSubPanel .pointer[data-pointer="between"][data-lvl=\"{i}\"]:before
  .BookmarksSubPanel .pointer[data-pointer="between"][data-lvl=\"{i}\"]:after
    transform: "translateX(calc(var(--bookmarks-indent) * %s + var(--bookmarks-margin)))" % i
.pointer .arrow
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  opacity: 1
  overflow: hidden
  &:before, &:after
    content: ''
    position: absolute
    top: 4px
    left: -11px
    width: 16px
    height: 16px
    transform: rotateZ(45deg)
  &:before
    box-shadow: inset 0 0 0 2px var(--s-accent, var(--frame-el-overlay-selected-border))
    transition: background-color var(--d-fast)
  &:after
    opacity: 1
    box-shadow: inset -1px 1px 0 0 var(--s-accent, var(--frame-el-overlay-selected-border))
  &[data-expanding="true"]
    animation: pointer-expand-arrow .3s
  &[data-expanding="true"]:after
    animation: pointer-expand-pulse .5s

// ---
// -- Drag and Drop Layer
// -
.dnd-layer
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: -1
#root[data-drag="true"] .dnd-layer
  z-index: 1000

// ---
// -- Animations
// -
@keyframes pointer-expand-arrow
  0%
    opacity: 0
  100%
    opacity: 1

@keyframes pointer-expand-pulse
  0%
    opacity: 1
    transform: rotateZ(45deg) scale(1, 1)
  100%
    opacity: 0
    transform: rotateZ(45deg) scale(2, 2)

.dbg
  position: absolute
  z-index: 9999
  left: 50%
  bottom: 0
  font-size: rem(8)
  color: #00ff22
  transform: translateX(-50%)

.dbg-item
  position: relative
