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

.BookmarksPopup .popup h2
  z-index: 2

.BookmarksPopup .field
  position: relative
  padding: 2px 4px
  &:first-of-type
    margin-top: 0

.BookmarksPopup .field-label
  position: relative
  width: 100%
  font-size: rem(12)
  font-weight: 700
  color: var(--popup-fg)
  opacity: .7

.BookmarksPopup .field > .input
  font-size: rem(15)
  margin: 3px 0 10px
  transition: color 1s
  > input
  > textarea
    width: 100%
    padding: 0 1px 0 4px
    color: var(--popup-fg)
    mask: linear-gradient(-90deg, transparent, #000000 4px, #000000)
  > .placeholder
    color: var(--popup-fg)
  &[data-empty="true"] .placeholder
    opacity: .5
  &.err
    transition: none
    color: var(--status-err)
  &[data-active="true"]:before
    box-shadow: inset 0 0 0 1px var(--popup-fg)

.BookmarksPopup .location
  position: relative
  padding: 4px
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: var(--popup-fg)
    opacity: 0
  &[data-wrong="true"] .location-value
    animation: shake-animation .3s, err-blink-animation .6s
  &:hover:before
    opacity: .06
  &:active:before
    opacity: .03

.BookmarksPopup .location-body
  position: relative
  display: flex
  align-items: center

.BookmarksPopup .folder-icon
  position: relative
  width: 16px
  height: 16px
  margin: 0 3px 0 0
  flex-shrink: 0
  fill: var(--popup-fg)
  opacity: .7

.BookmarksPopup .location-value
  position: relative
  padding: 2px 0
  margin: 0 24px 0 4px
  flex-grow: 1
  font-size: rem(15)
  font-weight: 700
  color: var(--popup-fg)
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

.BookmarksPopup .new-folder-btn
  position: absolute
  width: 28px
  height: 28px
  top: calc(50% - 14px)
  right: -3px
  margin: 0 0 0 3px
  flex-shrink: 0
  cursor: pointer
  > svg
    position: absolute
    top: 6px
    left: 6px
    width: 16px
    height: 16px
    fill: var(--popup-fg)
    opacity: .7
  &:before
    content: ''
    position: absolute
    top: 3px
    left: 3px
    width: calc(100% - 6px)
    height: calc(100% - 6px)
    border-radius: 4px
    background-color: var(--popup-fg)
    opacity: 0
  &:hover:before
    opacity: .2
  &:active:before
    opacity: .12

.BookmarksPopup .new-folder-field
  position: relative
  display: flex
  min-height: 22px
  margin: 4px 0 0
  align-items: center

.BookmarksPopup .new-folder-input
  font-size: rem(15)
  width: 100%
  margin: 0 28px 0 0
  transition: color 1s
  > input
  > textarea
  > .placeholder
    color: var(--popup-fg)
  &[data-empty="true"] .placeholder
    opacity: .5
  &.err
    transition: none
    color: var(--status-err)
  &[data-active="true"]:before
    box-shadow: inset 0 0 0 1px var(--popup-fg)

.BookmarksPopup .tree
  position: relative
  display: flex
  flex-direction: column
  min-height: 64px
  overflow: hidden
  // box-shadow: 0 1px 0 0 var(--border), 0 -1px 0 0 var(--border)
  user-select: none
  background-color: var(--frame-bg)
  .scrollable
    padding-top: var(--bookmarks-margin)

.BookmarksPopup .tree .fav:hover
  transition: none
  opacity: .64
.BookmarksPopup .tree .fav:active
  transition: none
  opacity: .32

.BookmarksPopup .tree .dnd-layer
  display: none

.BookmarksPopup .tree .ctrls
  flex-shrink: 0

.BookmarksPopup .recent-locations
  position: relative
  padding: 2px 4px
  margin: 6px 0 0

.BookmarksPopup .recent-folder
  position: relative
  display: flex
  justify-content: center
  align-items: center
  padding: 3px 4px
  margin: 2px 0
  border-radius: 4px
  &:before, &:after
    content: ''
    position: absolute
    width: 100%
    height: 100%
    opacity: 0
    border-radius: 4px
  &:before
    background-color: var(--popup-fg)
  &:after
    box-shadow: inset 0 0 0 1px var(--popup-fg)
  &:hover:before
    opacity: .2
  &[data-sel="true"]:after
  &[data-sel="true"]:before
    opacity: .2
  &:active:before
    opacity: .1

.BookmarksPopup .folder-icon
  position: relative
  width: 16px
  height: 16px
  margin: 0 4px 0 0

.BookmarksPopup .folder-label
  position: relative
  width: 100%
  font-size: rem(15)
  color: var(--popup-fg)
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

.BookmarksPopup .loading-screen
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 1
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: var(--popup-bg)