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

component
  min-width: 74px
  max-width: 74px
  display: grid
  grid-template-rows: subgrid
  grid-row: span 7
  justify-content: center
  background-color: colors.$BRIGHTENER
  padding: 0 0.5em 0.5em 0.5em
  box-shadow: 0 2px 4px 0 rgba(black, 0.1)
  border-radius: 1px
  color: var(--color-cream)
  border-top: 0.125em transparent solid

  @include mixins.dragging
  @include mixins.unit-type-colors

  &.editing
    border-top: 0.125em var(--color) solid
    background: linear-gradient(to bottom, var(--color) -500%, rgba(white, 0.03) 10%)

  &.compact
    padding: 0.5em
    height: 100%
    row-gap: 4px
    grid-template-rows: 1fr auto

  > h5
    font-size: 0.5em
    padding: 0 0.5em
    line-height: 200%
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    text-align: center
    align-self: center
    height: 2em
    max-width: 100%

    &.index
      margin: 0.5em 0
      color: rgba(white, 0.2)

    &.input
      color: var(--color)
      border-radius: 0.25em
      outline: 1px rgba(white, 0.03) solid
      outline-offset: -1px

  > div.sends
    display: flex
    width: calc(100% - 0.5em)
    flex-direction: column
    border-radius: 0.25em
    flex: 0 0 4em
    margin: 0.5em

    &.channel
      background-color: rgba(black, 0.2)

  > div.twin-layout
    display: grid
    grid-template-columns: repeat(2, 1fr)
    row-gap: 0.5em
    column-gap: 0.25em
    @include mixins.width-available

    &.volume
      grid-template-rows: calc(1em - 1px) 1fr

      > div.value-display
        height: 100%
        border-radius: 2px
        background-color: rgba(black, 0.2)
        font-size: 0.5em
        line-height: 2em
        text-align: center

        &.peak
          cursor: pointer

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

          &.clipping
            color: white
            background-color: var(--color-red)

    &.mute-solo
      font-size: 0.5em

      .mute
        justify-self: end
        margin-right: 0.5em

      .solo
        justify-self: start
        margin-left: 0.5em