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

#root
  --history-item-margin: var(--general-margin)
  --history-item-border-radius: var(--general-border-radius)
  --history-item-padding-left: 6px
  --history-item-padding-right: 5px
#root[data-density="compact"]
  --history-item-padding-left: 6px
  --history-item-padding-right: 4px
#root[data-density="loose"]
  --history-item-padding-left: 7px
  --history-item-padding-right: 6px

.HistoryPanel
  position: absolute
  display: flex
  width: 100%
  height: 100%
  flex-direction: column
  z-index: 100
  transition: transform var(--d-fast), opacity var(--d-fast), z-index var(--d-fast)
  min-height: 150px
.sub-panel .HistoryPanel
  position: relative
  overflow: hidden
  padding-top: var(--history-item-margin)

.HistoryPanel .SubListTitle[data-folded="false"]
  position: sticky
  top: 0px

.HistoryPanel .history-groups
  position: relative
  padding-bottom: 64px

.HistoryPanel .group
  position: relative

.HistoryPanel .group-list
  position: relative
  padding: 0 0 8px

.HistoryPanel .item
  position: relative

.HistoryPanel .item .body
  position: relative
  margin: 0 var(--history-item-margin) var(--history-item-margin)
  padding: var(--history-item-padding-left) 0 var(--history-item-padding-right) 0
  border-radius: var(--history-item-border-radius)
  background-color: var(--frame-el-bg)
  box-shadow: var(--frame-el-shadow)
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: var(--history-item-border-radius)
    z-index: 1
.HistoryPanel .item .body:hover:before
  background-color: var(--frame-el-overlay-hover-bg)
.HistoryPanel .item .body:active:before
  background-color: var(--frame-el-overlay-clicked-bg)
  box-shadow: inset 0 0 0 1px #00000012
.HistoryPanel .item .body[data-sel="true"]:before
  background-color: var(--frame-el-overlay-selected-bg)
  box-shadow: inset 0 0 0 1px var(--frame-el-overlay-selected-border)
.HistoryPanel .item .body.-more
.HistoryPanel .item .body.-av
  margin-top: var(--history-item-margin)
.HistoryPanel .item .body.-more
  margin-bottom: var(--history-item-margin)

.HistoryPanel .item .title-line
  position: relative
  display: flex
  align-items: center
  z-index: 2

.HistoryPanel .item .fav
  position: relative
  width: 16px
  height: 16px
  flex-shrink: 0
  margin: 0 0 0 var(--history-item-padding-left)
  cursor: pointer

  transform: translateZ(0)
  // Why: b/c height of sub-panel is "vh" it gets non-integer value which lead to cutting/shifting the icon
  // Temp: until round() css function is enabled (layout.css.round.enabled)

  > svg, > img
    position: absolute
    width: 16px
    height: 16px
    top: 0
    left: 0
    fill: var(--frame-fg)
  > svg
    opacity: .7
  &:hover
    opacity: .7
  &:active
    opacity: .5

.HistoryPanel .item .title
  position: relative
  width: 100%
  margin: 0 1px 1px 5px
  font-size: rem(14)
  color: var(--frame-fg)
  white-space: nowrap
  overflow: hidden
  transition: transform var(--d-fast), color var(--d-fast)
  mask: linear-gradient(-90deg, transparent, #000000 12px, #000000)

.HistoryPanel .item .url-line
  position: relative
  display: flex
  align-items: center
  margin: 1px var(--history-item-padding-right) 0 var(--history-item-padding-left)

.HistoryPanel .item .url
  position: relative
  font-size: rem(11)
  color: var(--frame-fg)
  word-break: break-all
  overflow: clip
  line-height: 1rem
  max-height: 3rem
  flex-shrink: 1
  opacity: .6

.HistoryPanel .item .inltm
  position: relative
  display: inline
  font-size: rem(11)
  line-height: 1rem
  word-break: break-all
  opacity: 0

.HistoryPanel .item .more
  position: relative
  margin: 0 var(--history-item-padding-right) 1px 0
  font-size: rem(11)
  color: var(--frame-fg)
  white-space: nowrap
  overflow: clip
  flex-shrink: 0
  line-height: 1rem
  text-align: right
  opacity: .7

.HistoryPanel .item .time
  position: absolute
  bottom: 0
  right: 0
  margin: 0 0 0 auto
  padding: 0 0 0 6px
  white-space: nowrap
  overflow: clip
  line-height: 1rem
  font-size: rem(11)
  color: var(--frame-fg)
  background-color: var(--frame-el-bg, var(--frame-bg));

.HistoryPanel .history-groups .LoadingDots
  height: 36px

.HistoryPanel .controls
  position: relative
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  padding: 16px 8px 0
  transition: opacity var(--d-fast)
  &[data-loading="true"]
    opacity: .3
  &[data-all-loaded="true"]
    opacity: 0
    pointer-events: none

.HistoryPanel .controls .note
  position: relative
  text-align: center
  font-size: rem(13)
  font-weight: 700
  color: var(--frame-fg)
  cursor: pointer
  user-select: none
  opacity: .7
  &:hover
    opacity: .5
  &:active
    opacity: .3

#root[data-search="true"] .HistoryPanel .controls
  opacity: 0
  pointer-events: none
