@use "@/colors"

component
  display: flex
  flex-direction: column
  position: relative
  overflow: hidden
  flex: 0 0 0
  border-radius: 1px

  &.horizontal.closed
    > header
      min-width: 1.5em
      max-width: 1.5em
      min-height: 100%
      max-height: 100%
      padding: 0.25em 0 0 0
      flex-direction: column

      > span
        transform: rotate(90deg) translateX(calc(50% - 0.5em))

  > header
    font-size: 0.75em
    min-height: 1.5em
    max-height: 1.5em
    min-width: 100%
    max-width: 100%
    padding: 0 0 0 0.25em
    display: flex
    align-items: center
    gap: 0.375em
    color: var(--color-dark)
    z-index: 1
    @include colors.panel-background-bright

    > span
      font-size: 0.875em
      white-space: nowrap

    > div.controls
      display: flex
      flex-direction: inherit

    > span
      white-space: nowrap

  > div
    > div.popup-label
      flex: 1
      display: flex
      align-items: center
      justify-content: center
      @include colors.panel-background

      > span
        font-size: 0.625em
        white-space: nowrap
        color: var(--color-dark)

    > *
      border-top: 1px solid var(--background)