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

@include tools.layer('components')
  .v-list
    overflow: auto
    padding: $list-padding
    position: relative
    outline: none

    @include tools.border($list-border...)
    @include tools.elevation($list-elevation)
    @include tools.rounded($list-border-radius)
    @include tools.theme($list-theme...)

    &--disabled
      pointer-events: none
      user-select: none

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

      .v-list-item:not(:first-child),
      .v-list-group:not(:first-child) > .v-list-item,
      .v-list-group__items > .v-list-item,
      .v-list-group__items > .v-list-group
        margin-top: $list-item-nav-margin-top

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

    &--subheader
      padding-top: $list-subheader-padding-top

  .v-list-img
    border-radius: inherit
    display: flex
    height: 100%
    left: 0
    overflow: hidden
    position: absolute
    top: 0
    width: 100%
    z-index: -1

  .v-list-subheader
    $root: &

    align-items: center
    background: inherit
    color: $list-subheader-color
    display: flex
    font-size: $list-subheader-font-size
    font-weight: $list-subheader-font-weight
    line-height: $list-subheader-line-height
    padding-inline-end: $list-subheader-padding-end
    min-height: $list-subheader-min-height
    transition: $list-subheader-transition

    &__text
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap

    @at-root
      @include tools.density('v-list', $list-density) using ($modifier)
        $base-padding: list.nth($list-item-padding, 2)

        #{$root}
          min-height: $list-subheader-min-height + ($modifier * $list-subheader-min-height-multiplier)
          padding-inline-start: calc(#{$base-padding} + var(--indent-padding))

    &--inset
      --indent-padding: #{$list-subheader-inset-padding-start}

    .v-list--nav &
      font-size: $list-nav-subheader-font-size

    &--sticky
      background: inherit
      left: 0
      position: sticky
      top: 0
      z-index: 1

  .v-list__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