@use "@/colors"
@use "@/mixins"

component
  display: flex
  flex-direction: column
  font-size: 0.625em
  line-height: 1.5em
  padding: 0 0.25em
  position: relative
  overflow: hidden
  outline: none
  @include colors.panel-background

  > div.filter
    display: flex
    align-items: center
    font-size: 1rem
    height: 2rem
    column-gap: 0.25rem
    margin-bottom: 0.5rem
    grid-column: 1 / -1

  > div.content
    flex: 1 0 0
    display: grid
    grid-template-columns: 1fr auto auto auto
    column-gap: 1em
    align-content: start
    overflow: hidden

  > div.footer
    display: flex
    align-items: center
    height: 1.25rem
    column-gap: 0.5rem
    grid-column: 1 / -1
    padding: 0.5em 0 0 0
    color: var(--color-shadow)

    > input[type="range"]
      @include mixins.width-available

  header
    padding-left: 6px

  header, div.scrollable
    display: grid
    grid-template-columns: subgrid
    grid-column: 1 / -1

  header > span
    color: var(--color-blue)
    line-height: 1.75em

    &.right
      text-align: right

  div.scrollable
    overflow-y: scroll

  div.loading
    display: flex

  div.error
    display: flex
    flex-direction: column
    row-gap: 0.5em
    color: var(--color-orange)