@use "@/mixins"

component
  @include mixins.floating

  font-size: 1.125rem
  position: fixed
  display: grid
  grid-template-columns: 2em 1fr
  column-gap: 0.25rem
  row-gap: 0.5rem
  padding: 0.5rem 0.25rem
  width: 28rem
  left: -14rem
  color: var(--color-gray)

  > header
    grid-column: 1 / -1
    display: grid
    grid-template-columns: subgrid
    align-items: center

    > svg
      width: 1.25rem
      height: 1.25rem
      justify-self: center

    > input
      color: inherit
      font-size: inherit
      font-weight: inherit
      font-family: inherit
      appearance: none
      border: none
      background: none
      padding: 0
      outline: none
      width: 100%

      &::placeholder
        color: var(--color-shadow)

  > div.result
    grid-column: 1 / -1
    display: grid
    grid-template-columns: subgrid
    height: 12rem
    align-content: start
    overflow: hidden auto
    border-top: 1px rgba(white, 0.06) solid
    padding: 0.5rem 0 0 0

    > div.result-item
      grid-column: 1 / -1
      display: grid
      grid-template-columns: subgrid
      align-items: center
      height: 1.5em
      border-radius: 0.125em

      &.selected
        color: white
        background-color: rgba(white, 0.06)

      > svg
        justify-self: center