@use '../../styles/tools'
@use './variables' as *
@use './mixins' as *

.v-chip
  align-items: center
  display: inline-flex
  font-weight: $chip-font-weight
  max-width: $chip-max-width
  min-width: 0
  overflow: hidden
  position: relative
  text-decoration: none
  white-space: $chip-white-space
  vertical-align: middle

  @at-root
    @include chip-sizes()
    @include chip-density('height', $chip-density)

  @include tools.border($chip-border...)
  @include tools.states('.v-chip__overlay')
  @include tools.rounded($chip-border-radius)
  @include tools.variant($chip-variants...)

  &--border
    border-width: $chip-border-thin-width

  &--link
    cursor: pointer

  &--filter
    user-select: none

  &--label
    @include tools.rounded($chip-label-border-radius)

// Elements
.v-chip__content
  align-items: center
  display: inline-flex

  .v-autocomplete__selection &,
  .v-combobox__selection &,
  .v-select__selection &
    overflow: hidden

.v-chip__filter,
.v-chip__prepend,
.v-chip__append,
.v-chip__close
  align-items: center
  display: inline-flex

.v-chip__close
  cursor: pointer
  flex: 0 1 auto
  font-size: $chip-close-size
  max-height: $chip-close-size
  max-width: $chip-close-size
  user-select: none

  .v-icon
    font-size: inherit

.v-chip__filter
  transition: $chip-filter-transition

.v-chip__overlay
  @include tools.absolute()
  background-color: currentColor
  border-radius: inherit
  pointer-events: none
  opacity: 0
  transition: opacity .2s ease-in-out

.v-chip--disabled
  opacity: $chip-disabled-opacity
  pointer-events: none
  user-select: none

.v-chip--label
  border-radius: $chip-label-border-radius