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

.v-list-item
  align-items: center
  display: grid
  flex: none
  grid-template-areas: "prepend content append"
  grid-template-columns: max-content auto max-content
  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...)

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

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

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

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

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

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

  &--link
    cursor: pointer

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

  > .v-avatar
    margin-inline-end: $list-item-avatar-margin-end

  > .v-icon
    margin-inline-end: $list-item-icon-margin-end

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

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

  > .v-avatar
    margin-inline-start: $list-item-avatar-margin-start

  > .v-icon
    margin-inline-start: $list-item-icon-margin-start

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

.v-list-item__content
  align-self: center
  grid-area: content
  overflow: hidden

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

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

  &--end
    margin-inline-start: $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

  .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-start: list.nth($list-item-padding, 2)
          padding-inline-end: list.nth($list-item-padding, 2)

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

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

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

    .v-list &
      &:not(:only-child)
        margin-bottom: $list-item-nav-margin-top

.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: opacity 0.2s ease-in-out

  .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: #{$list-item-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(--list-indent-size))

.v-list-group__items .v-list-item
  padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important

.v-list-group__header.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))