$c1: rgb(16, 22, 26)

.panel-header
  background-color: var(--panel-secondary-background-color, #eee)
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: center
  padding: 0.2em 0.6em
  border-bottom: 1px solid var(--panel-rule-color, #ddd)

  h1
    margin-bottom: 0.2em
    margin-top: 0.2em
    font-size: var(--panel-header-font-size, 1.2em)
    &.overflow-hidden
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis

  // \:global(.bp6-button)
  //   align-self: center

:global(.bp6-dark)
  .panel, .content-panel
    $c2: rgb(255, 255, 255)
    box-shadow: 0 0 0 1px rgba($c2, 0.2), 0 0 0 rgba($c2, 0), 0 1px 1px rgba($c2, 0.4)

.expander
  flex-grow: 1

.panel-column
  flex-grow: 1
  position: relative

.panel,.content-panel
  overflow: hidden
  box-shadow: 0 0 0 1px rgba($c1, 0.2), 0 0 0 rgba($c1, 0), 0 1px 1px rgba($c1, 0.4)
  border-radius: 6px
  background-color: var(--panel-background-color, #fff)
  display: flex
  flex-direction: column

.content-panel
  padding: 0.5em

.panel
  flex-shrink: 1
  height: 100%
  max-height: 100vh

  &.minimal
    border-radius: 0
    //box-shadow: none
    .panel-content
      padding: 0
      border-radius: 0

.panel-content
  overflow-y: scroll
  padding: 1em
  flex: 1
  &>:last-child
    margin-bottom: 1em

.panel-outer
  display: flex
  flex-direction: column
  position: relative
  max-height: 100%

.panel-container-inner
  position: absolute
  top: 2em
  bottom: 2em
  left: 1em
  right: 1em
  display: flex
  flex-direction: column
  .expander
    flex: 1

.extra-space
  width: 1em

.panel-container
  position: sticky
  height: 100vh
  top: 0
  display: flex
  flex-direction: column