@use 'sass:selector'
@use 'sass:math'
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *

.v-autocomplete
  .v-field
    .v-text-field__prefix,
    .v-text-field__suffix,
    .v-field__input,
    &.v-field
      cursor: text

  .v-field
    .v-field__input
      > input
        flex: 1 1

  .v-field
    input
      min-width: $autocomplete-focused-input

    &:not(.v-field--focused)
      input
        min-width: 0

  .v-field--dirty
    .v-autocomplete__selection
      margin-inline-end: $autocomplete-selection-gap

  .v-autocomplete__selection-text
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap

.v-autocomplete
  &__content
    overflow: hidden

    @include tools.elevation($autocomplete-content-elevation)
    @include tools.rounded($autocomplete-content-border-radius)

  &__mask
    background: rgb(var(--v-theme-surface-light))

  &__selection
    display: inline-flex
    align-items: center
    height: calc($input-font-size * $input-line-height)
    letter-spacing: inherit
    line-height: inherit
    max-width: calc(100% - $autocomplete-selection-gap - $autocomplete-input-buffer)

  &__selection
    &:first-child
      margin-inline-start: 0

  &--chips.v-input--density-compact
    .v-field--variant-solo,
    .v-field--variant-solo-inverted,
    .v-field--variant-filled,
    .v-field--variant-solo-filled
      .v-label.v-field-label
        &--floating
          top: 0px

  &--selecting-index
    .v-autocomplete__selection
      opacity: var(--v-medium-emphasis-opacity)

      &--selected
        opacity: 1

    .v-field__input > input
      caret-color: transparent

  &--single
    &.v-text-field .v-field--focused input
      flex: 1 1
      position: absolute
      left: 0
      right: 0
      width: 100%
      padding-inline: inherit

    .v-field--active
      input
        transition: none

    .v-field--dirty:not(.v-field--focused)
      input
        opacity: 0

    .v-field--focused
      .v-autocomplete__selection
        opacity: 0

  &__menu-icon
    margin-inline-start: 4px
    transition: $autocomplete-transition

    .v-autocomplete--active-menu &
      opacity: var(--v-high-emphasis-opacity)
      transform: rotate(180deg)