@use "@/colors"

component
  width: var(--lane-height)
  height: 100%
  display: grid
  grid-template-rows: 13.5px 1fr
  grid-row: 1 / -1
  justify-items: center
  position: relative
  border-radius: 2px
  overflow: hidden
  z-index: 1
  pointer-events: none

  --hue: 0
  --progress: 0

  &.selected
    > span.label
      color: hsl(var(--hue), 60%, 10%)
      background-color: hsla(var(--hue), 100%, 60%, 0.75)

    > div.content
      background-color: hsla(var(--hue), 60%, 60%, 0.09)

  &.mirrored > span.label
    font-style: italic

  &.muted
    filter: saturate(25%)

  &.waiting > div.content
    > div.progress
      border: 1px hsl(var(--hue), 50%, 60%) dashed

  &.playing > div.content
    > div.progress
      border: 1px hsl(var(--hue), 50%, 60%) solid

    > canvas
      opacity: 1.0

  &.edit-mode
    box-shadow: 0 0 0 1px hsla(var(--hue), 60%, 45%, 0.1) inset

  > span.label
    padding: 0 0.25em
    line-height: 13.5px
    width: var(--lane-height)
    text-align: center
    font-size: 9px
    white-space: nowrap
    text-overflow: ellipsis
    overflow: hidden
    color: hsl(var(--hue), 60%, 60%)
    background-color: hsla(var(--hue), 45%, 60%, 0.15)

  > div.content
    width: 100%
    box-sizing: border-box
    display: grid
    position: relative
    justify-items: center
    background-color: hsla(var(--hue), 60%, 60%, 0.06)

    > *
      grid-area: 1 / -1
      aspect-ratio: 1 / 1
      top: 1px
      height: calc(100% - 2px)
      position: absolute

    > div.progress
      border-radius: 50%
      background: conic-gradient(from calc(var(--progress) * 1deg), transparent 50%, hsl(var(--hue), 50%, 50%))
      border: 1px hsl(var(--hue), 50%, 33%) solid
      background-color: hsl(var(--hue), 50%, 33%)

    > canvas
      opacity: 0.5