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

#root
  --ntb-padding: var(--general-margin)
  --ntb-border-radius: var(--general-border-radius)
  --ntb-btn-height: 30px
#root[data-density="compact"]
  --ntb-btn-height: 28px
#root[data-density="loose"]
  --ntb-btn-height: 32px

.TabsPanel .tab-space-filler
  position: relative
  height: var(--filler-height)
  z-index: 10

// Extra space at the bottom
.TabsPanel .bottom-space
  position: relative
  background-color: var(--frame-bg)
  z-index: 10
  height: 64px
  transition: transform var(--d-fast), z-index var(--d-fast) var(--d-fast)

.TabsPanel .scrollable
  padding: 0

.TabsPanel [data-color="toolbar"]
  --color: var(--frame-fg)

.AnimatedTabList
  position: relative
  transition: height var(--d-fast)

// ---
// --
// -
.TabsPanel .new-tab-btns
  position: sticky
  bottom: 0px
  display: flex
  width: 100%
  flex-wrap: wrap
  z-index: 10
  padding: 0 var(--ntb-padding)
  grid-gap: 0 var(--ntb-padding)
  background-color: var(--frame-bg)
  z-index: 1
  transition: transform var(--d-fast), opacity var(--d-fast), z-index var(--d-fast) var(--d-fast)
  &[data-new-tab-bar-position="bottom"]
    position: relative
    bottom: auto
  &:before
    content: ''
    position: absolute
    top: calc(var(--general-margin) * -1)
    left: -8px
    width: calc(100% + 16px)
    height: 100%
    transition: box-shadow var(--d-fast)
    box-shadow: 0 -10px 12px -10px #00000000, 0 -1px 0 0 #00000000
  &:after
    content: ''
    position: absolute
    bottom: 100%
    left: 0
    width: 100%
    height: var(--general-margin)
    background-color: var(--frame-bg)

.ScrollBox .bottom-shadow[data-show="true"] + .scroll-container .new-tab-btns
  transition: transform var(--d-fast), opacity var(--d-fast)
  z-index: 1000
  &:before
    box-shadow: 0 -10px 12px -10px #00000064, 0 -1px 0 0 #00000008
.ScrollBox .bottom-shadow[data-show="true"] + .scroll-container .bottom-space
  transition: transform var(--d-fast), opacity var(--d-fast)
  z-index: 1000

.TabsPanel .new-tab-btn
  position: relative
  display: flex
  justify-content: center
  align-items: center
  height: var(--ntb-btn-height)
  min-width: var(--ntb-btn-height)
  flex-grow: 1
  margin-bottom: var(--ntb-padding)
  border-radius: var(--ntb-border-radius)
  background-color: var(--frame-el-bg)
  box-shadow: var(--frame-el-shadow)
  z-index: 2
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: var(--ntb-border-radius)
  &:hover:before
    background-color: var(--frame-el-overlay-hover-bg)
  &:active:before
    background-color: var(--frame-el-overlay-clicked-bg)
  &[data-sel="true"]
    opacity: 1
  > svg
  > img
    position: absolute
    width: 16px
    height: 16px
    fill: var(--color, var(--frame-fg))
  &.-custom
    flex-grow: 0
  > svg.-icon
  > img.-icon
    mask: radial-gradient(
      circle at calc(100% - 1px) calc(100% - 1px),
      #00000024,
      #00000024 7px,
      #000000 8px,
      #000000
    )
  > svg.-badge
    position: absolute
    top: calc(50% + 0px)
    left: calc(50% + 0px)
    width: 11px
    height: 11px
    padding: 2px
    fill: var(--color, var(--frame-fg))
  &[data-br="true"]
    height: 0
    width: 100%
    opacity: 0
    margin: 0
    > svg
      display: none
  &[data-wide="true"]
    flex-grow: 1

.TabsPanel .new-tab-btns[data-sel="true"] .new-tab-btn:before
  background-color: var(--frame-el-overlay-selected-bg)
  box-shadow: inset 0 0 0 1px var(--frame-el-overlay-selected-border)

.TabsPanel .new-tab-btns .dnd-layer
  z-index: 1
  flex-shrink: 0
  z-index: 1000
  grid-gap: var(--general-margin)
  justify-content: flex-end

.TabsPanel .bottom-bar-space
  position: relative
  flex-shrink: 0
  height: calc(var(--tabs-height) + var(--general-margin))
