.q-tree
  position: relative
  color: $grey

  &__node
    padding: 0 0 3px 22px

    &:after
      content: ''
      position: absolute
      top: -3px
      bottom: 0
      width: 2px
      right: auto
      left: -13px
      border-left: 1px solid currentColor
    &:last-child:after
      display: none

    &--disabled
      pointer-events: none

      .disabled
        opacity: 1 !important

      > div,
      > i,
      > .disabled
        opacity: .6 !important

        .q-tree__node--disabled
          > div,
          > i,
          > .disabled
            opacity: 1 !important

  &__node-header:before
    content: ''
    position: absolute
    top: -3px
    bottom: 50%
    width: 31px
    left: -35px
    border-left: 1px solid currentColor
    border-bottom: 1px solid currentColor

  &__children
    padding-left: 25px

  &__node-body
    padding: 5px 0 8px 5px

  &__node--parent
    padding-left: 2px
    > .q-tree__node-header:before
      width: 15px
      left: -15px
    > .q-tree__node-collapsible > .q-tree__node-body
      padding: 5px 0 8px 27px
      &:after
        content: ''
        position: absolute
        top: 0
        width: 2px
        height: 100%
        right: auto
        left: 12px
        border-left: 1px solid currentColor
        bottom: 50px

  &__node--link
    cursor: pointer

  &__node-header
    padding: 4px
    margin-top: 3px
    border-radius: $generic-border-radius
    outline: 0

  &__node-header-content
    color: #000
    transition: color .3s

  &__node--selected .q-tree__node-header-content
    color: $grey

  &__icon,
  &__node-header-content .q-icon
    font-size: $tree-icon-font-size

  &__img
    height: 42px
    border-radius: 2px

  &__avatar, &__node-header-content .q-avatar
    font-size: 28px
    border-radius: 50%
    width: 28px
    height: 28px

  &__arrow,
  &__spinner
    font-size: 16px
    margin-right: 4px

  &__arrow
    transition: transform .3s

    &--rotate
      transform: rotate3d(0, 0, 1, 90deg)

  &__tickbox
    margin-right: 4px

  // remove connectors before root
  > .q-tree__node
    padding: 0
    &:after, > .q-tree__node-header:before
      display: none
  // leave space for root empty node
  > .q-tree__node--child > .q-tree__node-header
    padding-left: 24px

  &--dark .q-tree__node-header-content
    color: #fff

  &--no-connectors
    .q-tree__node:after,
    .q-tree__node-header:before,
    .q-tree__node-body:after,
    .q-tree__vguide:before,
    .q-tree__vguide:after
      display: none !important

  // virtual scroll layout: rows are flat siblings, nesting is drawn
  // through per-row guide spacers; paddings mirror the nested layout's
  // content offsets
  &__vnode
    padding-bottom: 3px

  &__vguide
    position: relative
    flex: 0 0 25px
    width: 25px

    // the ancestor's sibling line running through this row
    &--line:before
      content: ''
      position: absolute
      top: 0
      bottom: -3px // bridge the row's bottom padding
      left: 12px
      border-left: 1px solid currentColor

    // the elbow into this row's header
    &--connector:after
      content: ''
      position: absolute
      top: 0
      bottom: 50%
      left: 12px
      right: -18px
      border-left: 1px solid currentColor
      border-bottom: 1px solid currentColor

  &__vnode--parent .q-tree__vguide--connector:after
    right: -2px

  &--virtual
    .q-tree__node-header
      flex: 1 1 0%
      min-width: 0
      &:before
        display: none

    .q-tree__node-body
      flex: 1 1 0%
      min-width: 0

    .q-tree__vnode--parent .q-tree__node-header
      padding-left: 6px
    .q-tree__vnode--parent .q-tree__node-body
      padding-left: 27px
    .q-tree__vnode--child .q-tree__node-header
      padding-left: 26px
    .q-tree__vnode--root.q-tree__vnode--parent .q-tree__node-header
      padding-left: 4px
    .q-tree__vnode--root.q-tree__vnode--child .q-tree__node-header
      padding-left: 24px

  &--dense
    > .q-tree__node--child > .q-tree__node-header
      padding-left: 1px

    .q-tree
      &__arrow,
      &__spinner
        margin-right: 1px

      &__img
        height: 32px

      &__tickbox
        margin-right: 3px

      &__node
        padding: 0
        &:after
          top: 0
          left: -8px

      &__node-header
        margin-top: 0
        padding: 1px
        &:before
          top: 0
          left: -8px
          width: 8px

      &__node--child
        padding-left: 17px
        > .q-tree__node-header:before
          left: -25px
          width: 21px

      &__node-body
        padding: 0 0 2px

      &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
        padding: 0 0 2px 20px
        &:after
          left: 8px

      &__children
        padding-left: 16px

      &__vnode
        padding-bottom: 0

      &__vguide
        flex: 0 0 16px
        width: 16px

        &--line:before
          left: 8px
          bottom: 0

        &--connector:after
          left: 8px
          right: -13px

      &__vnode--parent .q-tree__vguide--connector:after
        right: 0

    &.q-tree--virtual
      // root leaves keep the child indent here: in the nested dense
      // layout the child padding outranks the root reset, aligning
      // root leaves with root parents
      .q-tree__vnode--child .q-tree__node-header
        padding-left: 18px
      .q-tree__vnode--parent .q-tree__node-header
        padding-left: 1px
      .q-tree__vnode--parent .q-tree__node-body
        padding-left: 20px

[dir=rtl]
  .q-tree__arrow
    transform: rotate3d(0, 0, 1, 180deg) #{"/* rtl:ignore */"}

    &--rotate
      transform: rotate3d(0, 0, 1, 90deg) #{"/* rtl:ignore */"}