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

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

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

    .v-field
      .v-field__input
        > input
          align-self: flex-start
          opacity: 1
          flex: 0 0
          position: absolute
          left: 0
          right: 0
          width: 100%
          transition: none
          pointer-events: none
          caret-color: transparent
          padding-inline: inherit

    .v-field--dirty
      .v-select__selection
        margin-inline-end: 2px

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

    &__content
      overflow: hidden
      @include tools.elevation($select-content-elevation)

      @at-root #{selector.append('.v-menu > .v-overlay__content', &)}
        @include tools.rounded($select-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
      letter-spacing: inherit
      line-height: inherit
      max-width: 100%

    .v-select__selection
      &:first-child
        margin-inline-start: 0

    &--selected
      .v-field
        .v-field__input
          > input
            opacity: 0

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

      .v-select--active-menu &
        transform: rotate(180deg)