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

$ACTIVE: hsl(210, 90%, 30%)
$PARENT: hsla(210, 90%, 30%, 0.5)

component
  @include mixins.floating
  position: fixed
  pointer-events: all
  flex-direction: column
  border-collapse: collapse
  color: var(--color-bright)
  min-width: 12em

  &:after
    content: ""
    top: -4px
    left: -4px
    width: calc(100% + 8px)
    height: calc(100% + 8px)
    position: absolute
    background-color: transparent
    z-index: -1

  &:focus > div.container > div.item.selected > div.default
    color: white
    background-color: $ACTIVE

  &.overflowing
    max-height: calc(100vh - 1em)

    > div.scroll
      display: flex

  > div.container
    display: flex
    flex-direction: column
    overflow: hidden
    pointer-events: all

    > div.item
      flex: 1 0 2.25em
      display: flex
      padding: 0 0.5em
      pointer-events: inherit

      &.selected > div.default
        color: white
        background-color: $PARENT

      &:hover > div.default
        color: white
        background-color: $ACTIVE

        > div.shortcut
          opacity: inherit

      &.has-children > div.default > svg.children-icon
        display: flex

      &:not(.selectable)
        color: var(--color-dark)
        pointer-events: none

      > div.default
        width: 100%
        display: flex
        align-items: center
        border-radius: 0.25em
        padding: 0 0.5em 0 0.25em
        white-space: nowrap

        &.checked > svg.check-icon
          visibility: visible

        > svg.check-icon, svg.children-icon
          pointer-events: none
          fill: none
          stroke: currentColor
          stroke-width: 1.5
          stroke-linecap: round
          width: 1em
          height: 1em

        > svg.check-icon
          visibility: hidden

        > svg.children-icon
          display: none

        > div.label
          pointer-events: none
          flex: 1
          margin: 0 3em 0 0.25em

        > div.shortcut
          display: flex
          opacity: 0.3
          pointer-events: none
          margin: 0
          justify-content: flex-end

          > span
            flex: 0 0 1em
            text-align: center

    > hr
      margin: 0.375em 0.75em
      width: calc(100% - 1.5em)
      height: 0
      border: 0
      border-top: 1px solid rgba(white, 0.07)
      pointer-events: none

  > div.scroll
    display: none
    align-items: center
    justify-content: center
    flex: 1 0 1.5em
    width: 100%
    color: var(--color-gray)

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