@use "@/colors"

component
  flex: 1 0 0
  display: flex
  flex-direction: column
  position: relative
  row-gap: 1px

  > div.generic
    width: 100%
    height: 100%
    display: grid
    grid-template: 2rem 1fr calc(1rem - 2px) / var(--timeline-header-width) 1fr
    gap: 1px

    > div.tool
      padding: 0 2rem 0 0.5rem
      display: flex
      align-items: center
      font-size: 0.75rem
      column-gap: 1rem
      @include colors.panel-background

      > div.menu
        display: flex
        align-items: center

    > div.time-axis
      flex: 1 0 0
      height: 100%
      display: grid
      grid-template-rows: 1fr 1fr
      @include colors.panel-background

    > div.editor
      grid-column: span 2
      display: grid
      grid-template-columns: subgrid

      > div.empty-header
        @include colors.panel-background

      > div.label
        width: 100%
        height: 100%
        padding: 0 0.5rem
        display: flex
        align-items: center
        justify-content: center
        font-size: 0.75em
        color: var(--color-shadow)
        @include colors.panel-background

    > div.space
      @include colors.panel-background