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

component
  display: flex
  flex-direction: column
  row-gap: 2rem
  align-items: start
  font-size: 0.6875rem
  padding: 1em
  @include colors.panel-background

  > div.resources
    display: flex
    flex-direction: column
    row-gap: 0.75em

    > section
      display: flex
      flex-direction: column
      row-gap: 0.25em
      color: var(--color)

      &.instrument
        --color: var(--color-green)

      &.audio
        --color: var(--color-blue)

      &.midi
        --color: var(--color-orange)

      > h1
        display: inline-block
        width: min-content
        white-space: nowrap
        font-size: 1em
        padding: 0.25em 0.5em
        border-radius: 0.25em
        background-color: rgba(black, 0.12)

      > ul
        margin: 0
        padding: 0.25em 0.5em
        font-size: 1em
        list-style: none
        color: var(--color-dark)
        display: flex
        flex-direction: column
        row-gap: 0.375em

        > li
          display: flex
          flex-direction: row
          align-items: center
          column-gap: 0.75em
          cursor: pointer

          &[draggable]
            cursor: grab

          &:hover
            color: var(--color-gray)

          > div.icon
            padding: 1px
            border-radius: 0.125em
            font-size: 1.5em
            color: rgba(black, 0.86)
            display: flex
            align-items: center
            justify-content: center
            background-color: var(--color)

  > div.manual
    display: flex
    flex-direction: column
    row-gap: 1.5em
    color: var(--color-dark)

    > section
      display: flex
      flex-direction: column
      row-gap: 0.25em

      > h1
        font-size: 1em

      > p
        max-width: 25em
        margin: 0
        font-size: 1em
        color: var(--color-shadow)