@use 'sass:list'
@use 'sass:map'
@use 'sass:math'
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  .v-list-item
    align-items: center
    display: grid
    flex: none
    grid-template-areas: "prepend content append"
    grid-template-columns: max-content 1fr auto
    outline: none
    max-width: 100%
    padding: $list-item-padding
    position: relative
    text-decoration: none

    @include tools.border($list-item-border...)
    @include tools.states('.v-list-item__overlay')
    @include tools.rounded($list-item-border-radius)
    @include tools.variant($list-item-variants...)

    &--focus-visible
      .v-list-item__overlay
        opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))

    @supports selector(:focus-visible)
      &::after
        pointer-events: none
        border: 2px solid currentColor
        border-radius: 4px
        opacity: 0
        transition: opacity .2s ease-in-out
        @include tools.absolute(true)

      &:focus-visible::after,
      &--focus-visible::after
        opacity: calc(.15 * var(--v-theme-overlay-multiplier))

    &__prepend,
    &__append
      > .v-badge .v-icon,
      > .v-icon
        opacity: #{$list-item-icon-opacity}

    &--active
      .v-list-item__prepend,
      .v-list-item__append
        > .v-badge .v-icon,
        > .v-icon
          opacity: #{$list-item-icon-active-opacity}

      &:not(.v-list-item--link)
        .v-list-item__overlay
          opacity: calc(#{map.get(settings.$states, 'activated')} * var(--v-theme-overlay-multiplier))

    &--rounded
      @include tools.rounded($list-item-rounded-border-radius)

    &--disabled
      pointer-events: none
      user-select: none
      opacity: $list-disabled-opacity

    &--link
      cursor: pointer

    .v-navigation-drawer--rail:not(.v-navigation-drawer--expand-on-hover) &,
    .v-navigation-drawer--rail.v-navigation-drawer--expand-on-hover:not(.v-navigation-drawer--is-hovering) &
      .v-avatar
        --v-avatar-height: 24px

  .v-list-item__prepend
    align-items: center
    align-self: center
    display: flex
    grid-area: prepend

    * ~ .v-list-item__spacer
      width: var(--v-list-prepend-gap)

    > .v-badge,
    > .v-icon,
    > .v-tooltip
      ~ .v-list-item__spacer
        width: var(--v-list-prepend-gap, $list-item-icon-margin-start)

    > .v-avatar,
    > .v-badge:is(:has(.v-avatar))
      ~ .v-list-item__spacer
        width: var(--v-list-prepend-gap, $list-item-avatar-margin-start)


    .v-list-item--slim &
      > .v-badge,
      > .v-icon,
      > .v-tooltip
        ~ .v-list-item__spacer
          width: var(--v-list-prepend-gap, $list-item-slim-spacer-width)

      > .v-avatar,
      > .v-badge:is(:has(.v-avatar))
        ~ .v-list-item__spacer
          width: var(--v-list-prepend-gap, $list-item-slim-avatar-spacer-width)

      > .v-list-item-action ~ .v-list-item__spacer
        width: var(--v-list-prepend-gap, $list-item-slim-action-spacer-width)

    .v-list-item--three-line &
      align-self: start

  .v-list-item__append
    align-self: center
    display: flex
    align-items: center
    grid-area: append

    .v-list-item__spacer
      order: -1
      transition: 150ms width settings.$standard-easing

    * ~ .v-list-item__spacer
      width: var(--v-list-prepend-gap)

    > .v-badge,
    > .v-icon,
    > .v-tooltip
      ~ .v-list-item__spacer
        width: var(--v-list-prepend-gap, $list-item-icon-margin-end)

    > .v-avatar,
    > .v-badge:is(:has(.v-avatar))
      ~ .v-list-item__spacer
        width: var(--v-list-prepend-gap, $list-item-avatar-margin-end)

    > .v-list-item-action ~ .v-list-item__spacer
      width: var(--v-list-prepend-gap, $list-item-action-spacer-width)

    .v-list-item--slim &
      > .v-badge,
      > .v-icon,
      > .v-tooltip
        ~ .v-list-item__spacer
          width: var(--v-list-slim-spacer-width, $list-item-slim-spacer-width)

      > .v-avatar,
      > .v-badge:is(:has(.v-avatar))
        ~ .v-list-item__spacer
          width: var(--v-list-prepend-gap, $list-item-slim-avatar-spacer-width)

      > .v-list-item-action ~ .v-list-item__spacer
        width: var(--v-list-prepend-gap, $list-item-slim-action-spacer-width)

    .v-list-item--three-line &
      align-self: start

  .v-list-item__content
    align-self: center
    grid-area: content
    overflow: hidden
    min-width: $list-item-content-min-width

    .v-navigation-drawer--rail:not(.v-navigation-drawer--expand-on-hover) &,
    .v-navigation-drawer--rail.v-navigation-drawer--expand-on-hover:not(.v-navigation-drawer--is-hovering) &
      min-width: 0

  .v-list-item-action
    align-self: center
    display: flex
    align-items: center
    flex: none
    transition: inherit
    transition-property: height, width

    &--start
      margin-inline-end: $list-item-action-margin-end
      margin-inline-start: -$list-item-action-margin-start

    &--end
      margin-inline-start: $list-item-action-margin-start
      margin-inline-end: -$list-item-action-margin-end

  .v-list-item-media
    margin-top: $list-item-media-margin-top
    margin-bottom: $list-item-media-margin-bottom

    &--start
      margin-inline-end: $list-item-media-margin-end

    &--end
      margin-inline-start: $list-item-media-margin-start

    .v-list-item--two-line &
      margin-top: $list-item-media-two-line-margin-top
      margin-bottom: $list-item-media-two-line-margin-bottom

    .v-list-item--three-line &
      margin-top: $list-item-media-three-line-margin-top
      margin-bottom: $list-item-media-three-line-margin-bottom

  .v-list-item-subtitle
    -webkit-box-orient: vertical
    display: -webkit-box
    opacity: $list-item-subtitle-opacity
    overflow: hidden
    padding: $list-item-subtitle-padding
    text-overflow: ellipsis
    overflow-wrap: $list-item-subtitle-overflow-wrap
    word-break: $list-item-subtitle-word-break

    .v-list-item--one-line &
      -webkit-line-clamp: 1

    .v-list-item--two-line &
      -webkit-line-clamp: 2

    .v-list-item--three-line &
      -webkit-line-clamp: 3

    @include tools.typography($list-item-subtitle-typography...)

    .v-list-item--nav &
      @include tools.typography($list-item-nav-subtitle-typography...)

  .v-list-item-title
    hyphens: $list-item-title-hyphens
    overflow-wrap: $list-item-title-overflow-wrap
    overflow: hidden
    padding: $list-item-title-padding
    white-space: nowrap
    text-overflow: ellipsis
    word-break: $list-item-title-word-break
    word-wrap: $list-item-title-word-wrap

    @include tools.typography($list-item-title-typography...)

    .v-list-item--nav &
      @include tools.typography($list-item-nav-title-typography...)

  .v-list-item
    @at-root
      @include tools.density('v-list-item', $list-density) using ($modifier)
        min-height: $list-item-min-height + $modifier

        &.v-list-item--one-line
          $one-line-padding: (list.nth($list-item-padding, 1) + $modifier)

          min-height: $list-item-one-line-min-height + $modifier

          @if ($one-line-padding > 0)
            padding-top: $one-line-padding
            padding-bottom: $one-line-padding

        &.v-list-item--two-line
          $two-line-padding: (list.nth($list-item-two-line-padding, 1) + $modifier)

          min-height: $list-item-two-line-min-height + $modifier

          @if ($two-line-padding > 0)
            padding-top: $two-line-padding
            padding-bottom: $two-line-padding

        &.v-list-item--three-line
          $three-line-padding: (list.nth($list-item-three-line-padding, 1) + $modifier)

          min-height: $list-item-three-line-min-height + $modifier

          @if ($three-line-padding > 0)
            padding-top: $three-line-padding
            padding-bottom: $three-line-padding

            .v-list-item__prepend,
            .v-list-item__append
              padding-top: math.div($three-line-padding, 2)

        &:not(.v-list-item--nav)
          &.v-list-item--one-line
            padding-inline: list.nth($list-item-padding, 2)

          &.v-list-item--two-line
            padding-inline: list.nth($list-item-two-line-padding, 2)

          &.v-list-item--three-line
            padding-inline: list.nth($list-item-three-line-padding, 2)

    &--nav
      padding-inline: $list-nav-padding

  .v-list-item__underlay
    position: absolute

  .v-list-item__overlay
    background-color: currentColor
    border-radius: inherit
    bottom: 0
    left: 0
    opacity: 0
    pointer-events: none
    position: absolute
    right: 0
    top: 0
    transition: 0.2s ease-in-out
    transition-property: opacity, color

    .v-list-item--active.v-list-item--variant-elevated &
      --v-theme-overlay-multiplier: 0

  $base-padding: list.nth($list-item-padding, 2)
  .v-list
    --indent-padding: 0px

    &--nav
      --indent-padding: -#{$list-nav-padding}

  .v-list-group
    --list-indent-size: #{$list-indent-size}
    --parent-padding: var(--indent-padding)
    --prepend-width: var(--v-list-group-prepend, #{$list-item-prepend-size})

    .v-list--slim &
      --prepend-width: var(--v-list-group-prepend, #{$list-item-slim-prepend-size})

    &--fluid
      --list-indent-size: 0px

    &--prepend
      --parent-padding: calc(var(--indent-padding) + var(--prepend-width))

    &--fluid.v-list-group--prepend
      --parent-padding: var(--indent-padding)

  .v-list-group__items
    --indent-padding: calc(var(--parent-padding) + var(--v-list-indent, var(--list-indent-size)))
    min-width: min-content

    .v-navigation-drawer--rail &
      min-width: 0

  .v-list-group__items .v-list-item
    @include tools.layer('overrides')
      padding-inline-start: calc(#{$base-padding} + var(--indent-padding))

  .v-list-group__header:not(.v-treeview-item--activatable-group-activator).v-list-item--active
    &:not(:focus-visible)
      .v-list-item__overlay
        opacity: 0

    &:hover
      .v-list-item__overlay
        opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))

@include tools.layer('trumps')
  @media (forced-colors: active)
    .v-list-item
      &--link:not(&--active)
        color: buttontext

      &--link[href]:not(&--active)
        color: unset

      &--active:not(&--disabled)
        [class*="v-list-item-"],
        [class*="v-list-item-"] > *,
        .v-icon
          color: highlight

      &--active:not(&--variant-text, &--variant-plain):not(&--disabled)
        background: highlight

        [class*="v-list-item-"],
        [class*="v-list-item-"] > *,
        .v-icon
          opacity: 1
          color: highlighttext
          forced-color-adjust: preserve-parent-color

      &--focus-visible::after
        opacity: 1

      @supports selector(:focus-visible)
        &::after
          color: buttontext

        &:focus-visible::after
          opacity: 1