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

@include tools.layer('components')
  .v-autocomplete
    @include select-compact-chip-label

    .v-field
      .v-text-field__prefix,
      .v-text-field__suffix,
      .v-field__input,
      .v-field__input > 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)

      @at-root #{selector.append('.v-menu > .v-overlay__content', &)}
        @include tools.rounded($autocomplete-content-border-radius)

      > .v-sheet
        display: flex
        flex-direction: column

    &__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

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

        &--selected
          opacity: 1

      .v-field__input > input
        caret-color: transparent

    &--single:not(.v-autocomplete--selection-slot)
      &.v-text-field 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 &
        transform: rotate(180deg)