@use "@/colors"

component
  display: flex
  flex-direction: column
  position: absolute
  top: 1px
  left: 1px
  width: calc(var(--width) - 1px)
  overflow: visible
  box-shadow: 0 0 2px 0 rgba(black, 0.5)
  --width: 96px
  will-change: transform
  padding: 0 0 1px 0
  border-radius: 0 0 3px 3px
  --color: var(--color-blue)

  &.selectable
    z-index: 10000

    > header
      color: var(--color-black)
      background-color: var(--color-blue)
      --color: var(--color-black)

  > header
    display: flex
    flex-direction: row
    border-radius: 3px 3px 0 0
    font-size: 0.5em
    grid-column: span 2
    width: 100%
    padding: 0 0 0 0
    height: 15px
    line-height: 15px
    color: var(--color-blue)
    background-color: var(--color-black)
    box-shadow: 0 0.5px 0.5px 0 rgba(white, 0.1) inset, 0 -0.5px 0.5px 0 rgba(black, 0.2) inset, 0 1px 1px 0 rgba(black, 0.2)
    position: relative

    > label
      padding-left: 4px
      cursor: move
      flex: 1

    > div.header-pin
      width: 0
      height: 0
      top: 50%
      left: 0
      position: relative

  &.collapse
    > header
      border-radius: 3px

    > div.surface
      display: none

  > div.surface
    display: grid
    grid-template-columns: auto auto
    grid-auto-rows: 16px
    align-items: center
    border-radius: 3px
    @include colors.panel-background-bright

    > label
      color: rgba(white, 0.25)
      padding-left: 0.75em
      font-size: 0.5em