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

@include tools.layer('components')
  .v-badge
    display: inline-block
    line-height: $badge-line-height

  .v-badge__badge
    align-items: center
    display: inline-flex
    border-radius: $badge-border-radius
    font-family: $badge-font-family
    font-size: $badge-font-size
    font-weight: $badge-font-weight
    height: $badge-height
    justify-content: center
    min-width: $badge-min-width
    padding: $badge-padding
    pointer-events: auto
    position: absolute
    text-align: center
    text-indent: 0
    transition: $badge-transition
    white-space: nowrap

    @include tools.theme($badge-theme...)

    &:has(.v-icon)
      padding: $badge-icon-padding

    .v-badge--bordered &
      &::after
        border-radius: inherit
        border-style: $badge-border-style
        border-width: $badge-border-width
        color: $badge-border-color
        content: ''
        position: absolute
        inset: 0
        transform: $badge-border-transform

    .v-badge--dot &
      border-radius: $badge-dot-border-radius
      height: $badge-dot-height
      min-width: 0
      padding: 0
      width: $badge-dot-width

      &::after
        border-width: $badge-dot-border-width

    .v-badge--inline &
      position: relative
      vertical-align: $badge-inline-vertical-align

    .v-icon
      color: inherit
      font-size: $badge-font-size
      margin: $badge-icon-margin

    img,
    .v-img
      height: 100%
      width: 100%

  .v-badge__wrapper
    display: flex
    position: relative

    .v-badge--inline &
      align-items: center
      display: inline-flex
      justify-content: center
      margin: $badge-wrapper-margin

@include tools.layer('trumps')
  @media (forced-colors: active)
    .v-badge__badge
      forced-color-adjust: preserve-parent-color
      background: highlight
      color: highlighttext