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

@include tools.layer('components')
  .v-treeview-item
    --list-indent-size: #{$treeview-indent-size}
    &.v-treeview-item--filtered
      display: none

    &.v-list-item--disabled:not(a)
      pointer-events: auto

      .v-selection-control
        pointer-events: none


    &__level
      width: #{$treeview-indent-size}

      .v-treeview--fluid &
        width: 0

  .v-treeview
    --v-treeview-indent-line-color: #{$treeview-indent-line-color}
    --v-treeview-indent-line-opacity: #{$treeview-indent-lines-opacity}

    &.v-list
      --indent-padding: #{$treeview-indent-padding}

    &.v-list--disabled .v-list-item__prepend
      pointer-events: auto

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

      &:not(:has(.v-list-item-action))
        > .v-icon
          margin-inline-start: $treeview-item-first-icon-margin-start

    &:has(.v-treeview-indent-lines)
      .v-list-item-action:first-child,
      .v-treeview-indent-lines + .v-list-item-action
        > .v-selection-control
          margin-inline: min(0px, calc(-1 * (var(--v-selection-control-size) - #{$treeview-indent-size}) / 2))

  .v-treeview-indent-lines
    position: absolute
    inset-inline-start: 0
    height: 100%
    display: grid
    padding-inline-start: $treeview-indent-lines-padding-left
    padding-block: $treeview-indent-lines-gap
    grid-template-columns: repeat(var(--v-indent-parts, 1), var(--prepend-width))
    opacity: var(--v-treeview-indent-line-opacity)
    pointer-events: none

  .v-treeview-indent-line
    &,
    &::before
      border: 0px $treeview-indent-line-style var(--v-treeview-indent-line-color)

    &--leaf,
    &--line
      border-inline-start-width: $treeview-indent-line-width
      height: 100%
      width: calc(50% + #{$treeview-indent-line-width-half})
      justify-self: end

    &--leaf
      position: relative

      &::before
        content: ''
        position: absolute
        border-bottom-width: $treeview-indent-line-width
        height: calc(50% + #{$treeview-indent-line-width-half})
        width: 100%

      &:last-child::before
        width: calc(100% - $treeview-indent-line-leaf-margin-right)

    &--leaf-link
      border-bottom-width: $treeview-indent-line-width
      height: calc(50% + #{$treeview-indent-line-width-half})
      margin-inline-start: $treeview-indent-lines-gap
      margin-inline-end: $treeview-indent-line-leaf-link-margin-right

    &--last-leaf
      border-inline-start-width: $treeview-indent-line-width
      border-bottom-width: $treeview-indent-line-width
      height: calc(50% + #{$treeview-indent-line-width-half})
      margin-inline-start: calc(50% - #{$treeview-indent-line-width-half})
      border-bottom-left-radius: $treeview-indent-line-border-radius

      @include tools.rtl()
        border-bottom-left-radius: 0
        border-bottom-right-radius: $treeview-indent-line-border-radius

      &:last-child
        margin-inline-end: $treeview-indent-line-leaf-margin-right

  .v-treeview-group.v-list-group
    --list-indent-size: 0px

    & > .v-treeview-item__level
      width: 0px

    .v-list-group__items .v-list-item
      @include tools.layer('overrides')
        padding-inline-start: calc(var(--indent-padding))