.combobox__control
  display: inline-flex
  justify-content: space-between
  width: 500px
  border-radius: 6px
  font-size: 16px
  line-height: 1
  outline: none
  background-color: #16212c96
  border: 1px solid hsl(240 6% 90%)
  transition: border-color 250ms, color 250ms

  &[data-invalid]
    border-color: hsl(0 72% 51%)
    color: hsl(0 72% 51%)

  &_multi
    width: 100%
    min-width: 200px
    max-width: 300px

.combobox__input
  appearance: none
  display: inline-flex
  min-width: 0
  min-height: 40px
  padding-left: 16px
  font-size: 16px
  background: transparent
  border-top-left-radius: 6px
  border-bottom-left-radius: 6px
  outline: none
  color: white
  width: 40rem

  &::placeholder
    color: #517aa2d2

.combobox__trigger
  appearance: none
  display: inline-flex
  justify-content: center
  align-items: center
  width: auto
  outline: none
  border-top-right-radius: 6px
  border-bottom-right-radius: 6px
  padding: 0 10px
  background-color: hsl(240 5% 96%)
  border-left: 1px solid hsl(240 6% 90%)
  color: hsl(240 4% 16%)
  font-size: 16px
  line-height: 0
  transition: 250ms background-color

.combobox__icon
  height: 20px
  width: 20px
  flex: 0 0 20px

.combobox__description
  margin-top: 8px
  color: hsl(240 5% 26%)
  font-size: 12px
  user-select: none

.combobox__error-message
  margin-top: 8px
  color: hsl(0 72% 51%)
  font-size: 12px
  user-select: none

.combobox__content
  background-color: #0d131ae0
  backdrop-filter: blur(8px)
  border-radius: 6px
  border: 1px solid hsl(240 6% 90%)
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
  transform-origin: var(--kb-combobox-content-transform-origin)
  animation: contentHide 250ms ease-in forwards
  color: red

  &[data-expanded]
    animation: contentShow 250ms ease-out

.combobox__listbox
  overflow-y: auto
  max-height: 360px
  padding: 8px
  

  &:focus
    outline: none

.combobox__item
  font-size: 16px
  line-height: 1
  color: hsl(240 4% 16%)
  border-radius: 4px
  display: flex
  align-items: center
  justify-content: space-between
  height: 32px
  padding: 0 8px
  position: relative
  user-select: none
  outline: none
  color: white

  &[data-disabled]
    color: hsl(240 5% 65%)
    opacity: 0.5
    pointer-events: none

  &[data-highlighted]
    outline: none
    background-color: hsl(200 98% 39%)
    color: white

.combobox__section
  padding: 8px 0 0 8px
  font-size: 14px
  line-height: 32px
  color: hsl(240 4% 46%)

.combobox__item-indicator
  height: 20px
  width: 20px
  display: inline-flex
  align-items: center
  justify-content: center

@keyframes contentShow
  from
    opacity: 0
    transform: translateY(-8px)

  to
    opacity: 1
    transform: translateY(0)

@keyframes contentHide
  from
    opacity: 1
    transform: translateY(0)

  to
    opacity: 0
    transform: translateY(-8px)