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

#root
  --tabs-pinned-height: 30px
  --tabs-pinned-width: 30px
  --tabs-height: 30px
  --tabs-margin: var(--general-margin)
  --tabs-indent: 10px
  --tabs-font: rem(15) sans-serif
  --tabs-count-font: rem(9) sans-serif
  --tabs-border-radius: var(--general-border-radius)
  --tabs-inner-gap: 5px
  --tabs-close-btn-margin: 2px
  --tabs-audio-btn-width: 22px
  --tabs-normal-bg: var(--frame-el-bg)
  --tabs-normal-fg: var(--frame-fg)
  --tabs-activated-bg: var(--active-el-bg)
  --tabs-activated-fg: var(--active-el-fg)
  --tabs-activated-shadow: var(--active-el-shadow)
#root[data-density="compact"]
  --tabs-pinned-height: 28px
  --tabs-pinned-width: 28px
  --tabs-height: 28px
  --tabs-indent: 8px
  --tabs-inner-gap: 4px
  --tabs-close-btn-margin: 1px
  --tabs-audio-btn-width: 20px
#root[data-density="loose"]
  --tabs-pinned-height: 32px
  --tabs-pinned-width: 32px
  --tabs-height: 32px
  --tabs-indent: 12px
  --tabs-inner-gap: 5px
  --tabs-close-btn-margin: 3px
#root[data-frame-color-scheme="dark"]
  --tabs-progress-bg: #ffffff16
  --tabs-lvl-opacity: .16
#root[data-frame-color-scheme="light"]
  --tabs-progress-bg: #00000016
  --tabs-lvl-opacity: .3

.Tab
  position: relative
  width: calc(100% - var(--tabs-margin) * 2)
  height: calc(var(--tabs-height) + var(--tabs-margin))
  margin: 0 var(--tabs-margin)
  padding-bottom: var(--tabs-margin)
  z-index: 10
  transition: transform var(--d-fast), opacity var(--d-fast), padding var(--d-fast)

  padding-left: calc(var(--tabs-indent) * 16)
  &[data-lvl="0"]
    padding-left: 0
  &[data-lvl="1"]
    padding-left: var(--tabs-indent)
  &[data-lvl="2"]
    padding-left: calc(var(--tabs-indent) * 2)
  &[data-lvl="3"]
    padding-left: calc(var(--tabs-indent) * 3)
  &[data-lvl="4"]
    padding-left: calc(var(--tabs-indent) * 4)
  &[data-lvl="5"]
    padding-left: calc(var(--tabs-indent) * 5)
  &[data-lvl="6"]
    padding-left: calc(var(--tabs-indent) * 6)
  &[data-lvl="7"]
    padding-left: calc(var(--tabs-indent) * 7)
  &[data-lvl="8"]
    padding-left: calc(var(--tabs-indent) * 8)
  &[data-lvl="9"]
    padding-left: calc(var(--tabs-indent) * 9)
  &[data-lvl="10"]
    padding-left: calc(var(--tabs-indent) * 10)
  &[data-lvl="11"]
    padding-left: calc(var(--tabs-indent) * 11)
  &[data-lvl="12"]
    padding-left: calc(var(--tabs-indent) * 12)
  &[data-lvl="13"]
    padding-left: calc(var(--tabs-indent) * 13)
  &[data-lvl="14"]
    padding-left: calc(var(--tabs-indent) * 14)
  &[data-lvl="15"]
    padding-left: calc(var(--tabs-indent) * 15)
  
  &[data-loading="true"]
    cursor: progress

  &[data-selected="true"]
  &[data-selected="true"]:hover
  &[data-selected="true"]:active
    z-index: 15
  
  &[data-edit="true"]
    z-index: 20
    padding-left: 0
    background-color: var(--frame-bg)

  &[data-discarded="true"] > .body > .fav
    opacity: .32
  &[data-discarded="true"] > .body > .t-box
  &[data-discarded="true"] > .body > .ctx
    opacity: .56

  &[data-pin="true"]
    width: var(--tabs-pinned-width)
    height: var(--tabs-pinned-height)
    margin: 0
    padding: 0

  &[data-active="true"]
    z-index: 20

.Tab.-hidden
  opacity: 0
  transform: translateY(-8px)

// ---
// -- Set outline for active colored tabs
// -
#root[data-frame-color-scheme="dark"] .Tab[data-colorized="true"]
  --tabs-activated-shadow: inset 0 0 0 1px #fff7,
                           0 1px 3px -1px #00000036
#root[data-frame-color-scheme="light"] .Tab[data-colorized="true"]
  --tabs-activated-shadow: inset 0 0 0 1px #0009,
                           0 1px 3px -1px #00000032

// ---
// -- Reset lvl in search mode
// -
#root[data-search="true"] .Tab
  padding-left: 0

// ---
// -- Body
// -
.Tab .body
  position: relative
  display: flex
  width: 100%
  height: 100%
  align-items: center
  transition: opacity var(--d-fast), transform var(--d-fast)
  border-radius: var(--tabs-border-radius)
  background-color: var(--tabs-normal-bg)
  box-shadow: var(--frame-el-shadow)
  &:after
    content: ''
    position: absolute
    display: none
    top: calc(-20% - var(--tabs-margin))
    left: calc(var(--tabs-indent) / -2)
    width: 1px
    height: calc(var(--tabs-height) + var(--tabs-margin))
    opacity: var(--tabs-lvl-opacity)
    background-color: var(--tabs-normal-fg)
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: var(--tabs-border-radius)
    z-index: 1

.Tab:hover .body:before
  background-color: var(--frame-el-overlay-hover-bg)

.Tab[data-active="true"] .body
  background-color: var(--tabs-activated-bg)
  box-shadow: var(--tabs-activated-shadow)
.Tab[data-active="true"]:hover .body:before
  background-color: initial

.Tab:active .body:before
  background-color: var(--frame-el-overlay-clicked-bg)

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

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

.Tab[data-pin="true"] .body
  justify-content: center
  width: 100%
  left: 0

#root[data-tabs-tree-lvl-marks="true"] .Tab[data-pin="false"]:not([data-lvl="0"]) .body:after
  display: block
  box-shadow: calc(var(--tabs-indent) * -1) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -2) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -3) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -4) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -5) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -6) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -7) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -8) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -9) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -10) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -11) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -12) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -13) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -14) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -15) 0 0 0 var(--tabs-normal-fg),
              calc(var(--tabs-indent) * -16) 0 0 0 var(--tabs-normal-fg)
.Tab[data-parent="true"][data-folded="false"] + .Tab .body:after
.Tab[data-edit="true"] + .Tab .body:after
  background-color: transparent
  background-image: linear-gradient(0deg, var(--tabs-normal-fg) 0, var(--tabs-normal-fg) 80%, transparent 80%, transparent)

// ---
// -- Color layer
// -
.Tab .color-layer
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  border-radius: var(--tabs-border-radius)
  background-color: var(--tab-color)
  opacity: .2
.Tab[data-active="true"] .color-layer
  opacity: .3
.Tab[data-active="false"] .color-layer
  box-shadow: 0 0 2px 0 #0007
#root[data-frame-color-scheme="light"] .Tab .color-layer
  opacity: .36
#root[data-frame-color-scheme="light"] .Tab[data-active="true"] .color-layer
  opacity: .5
#root[data-frame-color-scheme="light"] .Tab[data-active="false"] .color-layer
  box-shadow: inset 0 0 0 1px #0003

// ---
// -- Audio
// -
#root .Tab
  --tabs-pinned-audio-btn-width: 16px
  --tabs-pinned-audio-btn-height: 16px
#root[data-density="compact"] .Tab
  --tabs-pinned-audio-btn-width: 14px
  --tabs-pinned-audio-btn-height: 14px

.Tab .audio
  position: absolute
  z-index: 1

.Tab .audio-icon
  position: absolute
  top: calc(50% - 6px)
  left: calc(50% - 6px)
  width: 12px
  height: 12px
  fill: var(--tabs-normal-fg)
  transition: opacity var(--d-fast)
  opacity: 0

.Tab[data-pin="false"][data-active="true"] .audio-icon
  fill: var(--tabs-activated-fg)

.Tab[data-pin="false"] .audio
  top: 0
  left: calc(18px + var(--tabs-inner-gap))
  width: calc(var(--tabs-audio-btn-width) + 2px)
  height: 100%
  animation: appearing-animation var(--d-norm)
.Tab[data-pin="true"] .audio
  top: 0
  right: 0
  width: var(--tabs-pinned-audio-btn-width)
  height: var(--tabs-pinned-audio-btn-height)
  border-radius: calc(var(--tabs-border-radius) - 1px)
  background-color: var(--frame-bg)
  box-shadow: inset 0 0 0 1px #0003

.Tab[data-audible="true"] .audio
.Tab[data-muted="true"] .audio
.Tab[data-paused="true"] .audio
  opacity: 1
  z-index: 21
  &:hover
    opacity: .7
  &:active
    opacity: .5

.Tab[data-audible="true"]:not([data-muted="true"]):not([data-paused="true"]) svg.-loud
.Tab[data-muted="true"]:not([data-paused="true"]) svg.-mute
.Tab[data-paused="true"] svg.-pause
  opacity: 1

// ---
// -- Favicon
// -
.Tab .fav
  position: relative
  width: 16px
  height: 16px
  flex-shrink: 0
  opacity: 1
  z-index: 10

.Tab[data-pin="false"] .fav
  margin: 0 var(--tabs-inner-gap) 0 calc(var(--tabs-inner-gap) + 2px)
  z-index: 20

.Tab .fav-icon
  position: absolute
  top: 0
  left: 0
  width: 16px
  height: 16px
  fill: var(--tabs-normal-fg)
  transition: opacity var(--d-fast)

.Tab .fav svg
  opacity: .7

.Tab[data-active="true"] .fav-icon
  fill: var(--tabs-activated-fg)

.Tab[data-parent="true"] .fav:hover svg.fav-icon
.Tab[data-parent="true"][data-folded="true"] .fav svg.fav-icon
  opacity: .2

.Tab[data-parent="true"] .fav:hover img
.Tab[data-parent="true"][data-folded="true"] .fav img
  opacity: .2

.Tab[data-updated="true"] .fav-icon
.Tab[data-pending="true"] .fav-icon
.Tab[data-loading="ok"] .fav-icon
.Tab[data-loading="err"] .fav-icon
  mask: radial-gradient(
    circle at calc(100% - 2px) calc(100% - 2px),
    #00000024,
    #00000024 4px,
    #000000 5px,
    #000000
  )

.Tab[data-loading="true"] .fav-icon
  mask: radial-gradient(
    circle at calc(100% - 2px) calc(100% - 2px),
    #00000024,
    #00000024 7px,
    #000000 8px,
    #000000
  )

// ---
// -- Tabs group expand icon
// -
.Tab .exp
  position: absolute
  width: calc(100% + 8px)
  height: calc(100% + 8px)
  top: -4px
  left: -4px
  opacity: 0
  z-index: -1
  cursor: pointer
  transition: opacity var(--d-fast), transform var(--d-fast)
.Tab .exp-icon
  position: absolute
  top: 4px
  left: 4px
  width: 16px
  height: 16px
  fill: var(--tabs-normal-fg)
.Tab[data-active="true"] .exp-icon
  fill: var(--tabs-activated-fg)

.Tab[data-parent="true"] .fav:hover .exp
  z-index: 1
  opacity: 1

.Tab[data-parent="true"][data-folded="true"] .fav .exp
  z-index: 1
  opacity: 1
  transform: rotateZ(-90deg)

// ---
// -- Progress spinner
// -
.Tab .progress-spinner
  position: absolute
  box-sizing: border-box
  width: 12px
  height: 12px
  right: -4px
  bottom: -4px
  border-radius: 50%
  border-top: 2px solid var(--tabs-normal-fg)
  border-left: 2px solid var(--tabs-progress-bg)
  border-right: 2px solid var(--tabs-progress-bg)
  border-bottom: 2px solid var(--tabs-progress-bg)
  animation: rotating-animation .5s infinite linear
.Tab[data-active="true"] .progress-spinner
  border-top: 2px solid var(--tabs-activated-fg)

// ---
// -- Update / highlight badge
// -
.Tab .badge
  position: absolute
  width: 6px
  height: 6px
  right: -1px
  bottom: -1px
  border-radius: 50%
  background-color: var(--status-notice)
  opacity: 0
  transform: scale(0.7, 0.7)
  transition: opacity var(--d-norm), transform var(--d-norm), background-color var(--d-norm)

.Tab:not([data-loading="true"])[data-updated="true"] .badge
.Tab:not([data-loading="true"])[data-pending="true"] .badge
.Tab[data-loading="ok"] .badge
.Tab[data-loading="err"] .badge
  opacity: 1
  transform: scale(1, 1)

.Tab:not([data-loading="true"])[data-pending="true"] .badge
  background-color: var(--tabs-normal-fg)

.Tab[data-loading="ok"] .badge
  background-color: var(--status-ok)

.Tab[data-loading="err"] .badge
  background-color: var(--status-err)

// ---
// -- Count of descendants
// -
.Tab .child-count
  position: absolute
  width: 8px
  right: -2px
  bottom: -6px
  font: var(--tabs-count-font)
  text-align: center
  color: var(--tabs-normal-fg)
.Tab[data-active="true"] .child-count
  color: var(--tabs-activated-fg)

#root[data-search="true"] .Tab .child-count
.Tab[data-loading="true"] .child-count
.Tab[data-pending="true"] .child-count
  opacity: 0

// ---
// -- Flash animation
// -
.Tab .flash-fx
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  border-radius: var(--tabs-border-radius)
  overflow: hidden
  opacity: 1
  animation: flash-box-animation .4s
  &:before
    content: ''
    position: absolute
    width: 100%
    height: 100%
    top: 0
    left: 0
    background-image: linear-gradient(90deg, #00000000, var(--tabs-normal-fg))
    transform: translateX(-100%)
    animation: flash-progress-animation .4s
.Tab[data-active="true"] .flash-fx:before
  background-image: linear-gradient(90deg, #00000000, var(--tabs-activated-fg))

// ---
// -- Title box
// -
.Tab .t-box
  --audio-btn-offset: calc(var(--tabs-audio-btn-width) - var(--tabs-inner-gap))
  --close-btn-offset: calc(var(--tabs-height) - var(--tabs-close-btn-margin) * 2)

  position: relative
  width: 100%
  margin: 0 2px 0 0
  overflow: hidden
  z-index: 1
  mask: linear-gradient(-90deg, transparent, #000000 8px, #000000)

#root[data-tabs-close-btn="always"] .Tab .t-box
#root[data-tabs-close-btn="hover"] .Tab:hover .t-box
  mask: linear-gradient(
    -90deg,
    transparent,
    transparent var(--close-btn-offset),
    #000000 calc(var(--close-btn-offset) + 12px),
    #000000)

.Tab[data-edit="true"] .t-box
  margin: 0 6px 0 0
  mask: none

// ---
// -- Custom title input
// -
.Tab .custom-title-input
  position: relative
  display: block
  width: 100%
  padding: 0 1px
  margin: 0
  font: var(--tabs-font)
  color: var(--tabs-normal-fg)
  background-color: transparent
  appearance: none
  border: none

.Tab[data-audible="true"] .t-box .custom-title-input
.Tab[data-muted="true"] .t-box .custom-title-input
.Tab[data-paused="true"] .t-box .custom-title-input
  width: calc(100% - var(--audio-btn-offset))
  margin: 0 0 0 var(--audio-btn-offset)

// ---
// -- Title
// -
.Tab .title
  position: relative
  font: var(--tabs-font)
  color: var(--tabs-normal-fg)
  padding: 0 1px
  white-space: nowrap
  overflow: hidden
  transition: transform var(--d-fast)

.Tab[data-audible="true"] .t-box .title
.Tab[data-muted="true"] .t-box .title
.Tab[data-paused="true"] .t-box .title
  transform: translateX(var(--audio-btn-offset))

.Tab[data-active="true"] .title
  color: var(--tabs-activated-fg)

// ---
// -- Container highlight
// -
.Tab .ctx
  position: absolute
  z-index: 15
  background-color: var(--color)

.Tab[data-pin="false"] .ctx
  top: var(--tabs-border-radius)
  right: 0
  width: 2px
  height: calc(100% - var(--tabs-border-radius) * 2)

.Tab[data-pin="true"] .ctx
  box-shadow: 0 0 1px 0 #00000032
#root[data-pinned-tabs-position="panel"] .Tab[data-pin="true"] .ctx
#root[data-pinned-tabs-position="top"] .Tab[data-pin="true"] .ctx
  bottom: 2px
  left: 6px
  width: calc(100% - 12px)
  height: 2px
#root[data-pinned-tabs-position="panel"] .Tab[data-pin="true"][data-loading="true"] .ctx
#root[data-pinned-tabs-position="top"] .Tab[data-pin="true"][data-loading="true"] .ctx
  width: calc(50% - 12px)
  transition: width var(--d-fast)
#root[data-pinned-tabs-position="left"] .Tab[data-pin="true"] .ctx
#root[data-pinned-tabs-position="right"] .Tab[data-pin="true"] .ctx
  top: 6px
  width: 2px
  height: calc(100% - 12px)
#root[data-pinned-tabs-position="left"] .Tab[data-pin="true"] .ctx
  left: 0
#root[data-pinned-tabs-position="right"] .Tab[data-pin="true"] .ctx
  right: 0

// ---
// -- Close button
// -
.Tab .close
  position: absolute
  top: var(--tabs-close-btn-margin)
  right: var(--tabs-close-btn-margin)
  height: calc(100% - var(--tabs-close-btn-margin) * 2)
  aspect-ratio: 1 / 1
  z-index: 20
  opacity: 0
  border-radius: calc(var(--tabs-border-radius) - 1px)
  &:hover
    background-color: var(--frame-el-overlay-hover-bg)
  &:active
    background-color: var(--frame-el-overlay-clicked-bg)

.Tab[data-active="true"] .close
  &:hover
    background-color: var(--active-el-overlay-hover-bg)
  &:active
    background-color: var(--active-el-overlay-clicked-bg)

.Tab .close-icon
  position: absolute
  top: calc(50% - 9px)
  left: calc(50% - 9px)
  width: 18px
  height: 18px
  fill: var(--tabs-normal-fg)
  opacity: .7

.Tab[data-active="true"] .close-icon
  fill: var(--tabs-activated-fg)

#root[data-tabs-close-btn="always"] .Tab .close
#root[data-tabs-close-btn="hover"] .Tab:hover .close
  opacity: 1

// ---
// -- Unread mark
// -
.Tab .unread-mark
  position: absolute
  left: 0
  bottom: 0
  width: 6px
  height: 6px
  border-bottom-left-radius: 2px
  overflow: hidden
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 12px
    height: 10px
    transform: rotateZ(45deg)
    transform-origin: 0 0
    background-color: var(--tabs-normal-fg)


// ---
// -- Keyframes
// -
@keyframes appearing-animation
  0%
    opacity: 0
  100%
    opacity: 1

@keyframes flash-box-animation
  0%
    opacity: .8
  100%
    opacity: 0

@keyframes flash-progress-animation
  0%
    transform: translateX(-100%)
  100%
    transform: translateX(5px)
