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

component
  display: grid
  grid-template: 6em 4.5em / 27.25em
  row-gap: 0.25em
  color: var(--color-dark)
  @include mixins.Control

  > div.display
    display: flex
    flex-direction: column
    row-gap: 0.5em
    grid-column: 1 / -1

    > div.waveform
      flex: 1 0 0
      position: relative
      background-color: rgba(black, 0.08)
      border-radius: 1px
      box-shadow: 0 0.5px 1px 0 rgba(white, 0.1), 0 0.5px 1px 0 rgba(black, 0.1) inset

      > canvas
        width: 100%
        height: 100%
        position: absolute

  > div.columns
    display: grid
    grid-template-rows: subgrid
    grid-template-columns: 1.75em repeat(7, 2.25em)
    grid-area: 2 / 1 / -1 / -1
    column-gap: 1em

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

      > div.note-label
        width: 100%
        font-size: 0.625em
        text-align: center
        margin: 0.25em 0 0 0
        border-radius: 0.25em
        color: var(--color-black)
        background-color: var(--color-shadow)

      > div.checkboxes
        display: flex
        flex-direction: column
        row-gap: 0.25em

        > div
          display: flex
          justify-content: space-between
          font-size: 0.5em

          .exclude
            > label
              height: 0.875em
              font-size: 1rem
              border-radius: 2px

      > div.radio-group
        flex-direction: column
        row-gap: 5px

        > label
          font-size: 0.5em
          text-align: center
          width: 100%
          border-radius: 2px
          border: 0.5px solid var(--color)
          box-shadow: 0 0 3px -1px var(--color)

    div.label
      color: var(--color-shadow)
      margin: 0.25em 0 0 0.25em
      font-size: 0.625em