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

@include tools.layer('components')
  .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

    .v-icon
      --v-icon-size-multiplier: #{$chip-icon-size-multiplier}

    @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

    &--link,
    &--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
    padding: 0
    margin: 0
    font: inherit
    overflow: visible
    text-transform: none
    background-color: transparent
    border-style: none
    color: inherit
    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
    background-color: currentColor
    border-radius: inherit
    pointer-events: none
    opacity: 0
    transition: opacity .2s ease-in-out
    @include tools.absolute()

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

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

  @media (forced-colors: active)
    .v-chip
      &:not(&--variant-text, &--variant-plain)
        border: thin solid