.#{$ns}TreeControl {
  border: 1px solid var(--Form-input-borderColor);
  padding: 6px 12px;
  border-radius: 2px;
  max-height: 300px;
  overflow: auto;

  &.h-full {
    max-height: none;
    overflow: visible;
  }

  &.no-border {
    border: 0;
  }
}

.#{$ns}Tree {
  &-list,
  &-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  &-sublist {
    margin-left: var(--Tree-indent);
  }

  &-sublist.is-folded {
    display: none;
  }

  &-item {
    line-height: var(--Tree-itemHeight);
    position: relative;

    > div {
      &:hover {
        text-decoration: none;

        > .#{$ns}Tree-item-icons {
          visibility: visible;
        }
      }

      > span > svg {
        display: inline-block;
        cursor: pointer;
        position: relative;
        top: 2px;
        width: px2rem(16px);
        height: px2rem(16px);
        margin-left: var(--gap-xs);
      }
    }
  }

  &.is-disabled {
    pointer-events: none;
  }

  &.is-draggable {
    position: relative;
  }

  &--outline &-sublist &-item--isLeaf {
    &:before {
      position: absolute;
      top: -8px;
      left: calc((var(--Tree-indent) - 5px) * -1);
      bottom: 0px;
      border-left: 1px solid var(--borderColor);
      content: '';
    }
  }

  &-rootItem {
    line-height: var(--Tree-itemHeight);
  }

  &-item > div:hover > .#{$ns}Tree-item-icons,
  &-rootItem > div:hover > .#{$ns}Tree-item-icons {
    visibility: visible;
  }

  &-itemLabel {
    display: flex;
    align-items: center;
    position: relative;

    & > * {
      position: relative;
      z-index: 2;
    }

    &:hover:after {
      position: absolute;
      content: '';
      z-index: 1;
      background: var(--Tree-item-onHover-bg);
      top: 0;
      right: 0;
      bottom: 0;
      left: -99999px;
    }
  }

  &.is-draggable &-itemLabel:hover::after {
    display: none;
  }

  &-item-icons {
    visibility: hidden;
    transition: visibility var(--animation-duration) ease;
    display: inline-block;
    vertical-align: top;
    height: var(--Tree-itemHeight);
    line-height: var(--Tree-itemHeight);
    padding-right: var(--gap-xs);

    > a {
      display: inline-block;
      vertical-align: middle;
      margin-left: var(--gap-xs);
      cursor: pointer;

      > svg {
        $svgSize: px2rem(12px);
        width: $svgSize;
        height: $svgSize;
        top: 0;
      }
    }
  }

  &-itemInput {
    padding-left: var(--Tree-itemArrowWidth);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    > a {
      display: inline-block;
      cursor: pointer;
      margin-left: var(--gap-sm);
      color: var(--icon-color);

      &:hover {
        color: var(--icon-onHover-color);
        text-decoration: none;
      }
    }

    > input {
      flex-grow: 1;
      width: 100%;
      outline: none;
      background: var(--Form-input-bg);
      border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
      border-radius: var(--Form-input-borderRadius);
      line-height: var(--Form-input-lineHeight);
      padding: calc(
          (
              var(--Tree-inputHeight) - var(--Form-input-lineHeight) *
                var(--Form-input-fontSize) - #{px2rem(2px)}
            ) / 2
        )
        var(--Form-input-paddingX);
      font-size: var(--Form-input-fontSize);

      &::placeholder {
        color: var(--Form-input-placeholderColor);
        user-select: none;
      }

      &:focus {
        border-color: var(--Form-input-onFocused-borderColor);
        box-shadow: var(--Form-input-boxShadow);
        background: var(--Form-input-onFocused-bg);
      }
    }
  }

  &-addTopBtn {
    cursor: pointer;
    height: var(--Tree-itemHeight);
    line-height: var(--Tree-itemHeight);
    display: block;

    &:hover {
      text-decoration: none;
    }

    &.is-disabled {
      pointer-events: none;
      color: var(--text--muted-color);
    }

    > svg {
      $svgSize: px2rem(14px);
      width: $svgSize;
      height: $svgSize;
      top: $svgSize * 0.125;
      margin-right: var(--gap-xs);
    }
  }

  &-itemArrow {
    cursor: pointer;
    width: var(--Tree-itemArrowWidth);
    display: inline-flex;
    margin-right: var(--gap-xs);

    // &:before {
    //   font-style: normal;
    //   font-family: $Tree-arrowVendor;
    //   content: $Tree-unfoldedArrowContent;
    // }
    > svg {
      width: var(--Tree-itemArrowWidth);
      height: var(--Tree-itemArrowWidth);
      display: block;
      transition: transform var(--animation-duration);
      top: 0;
      transform: rotate(90deg);
    }

    &.is-folded > svg {
      transform: rotate(0deg);
    }
  }

  &-itemArrowPlaceholder {
    display: inline-block;
    width: calc(var(--Tree-itemArrowWidth) + var(--gap-xs));
  }

  &-itemDrager {
    cursor: move;
    color: var(--icon-color);
  }

  &-spinner {
    margin-right: var(--gap-xs);
  }

  &-itemIcon {
    display: inline-flex;
    margin-right: var(--gap-xs);
  }

  &-rootIcon,
  &-folderIcon,
  &-leafIcon {
    > svg {
      top: 0;
      width: px2rem(14px);
      height: px2rem(14px);
    }
  }

  &-itemLabel {
    user-select: none;

    &.is-checked,
    &.is-children-checked {
      color: var(--Tree-itemLabel--onChecked-color);
    }

    &.is-disabled {
      color: var(--text--muted-color);
    }

    > .#{$ns}Checkbox {
      display: inline-flex;
      align-self: center;
    }
  }

  &-itemText {
    cursor: pointer;
    flex: 1 auto;
    line-height: var(--lineHeightBase);
    padding: px2rem(4px) 0;
  }

  &-placeholder {
    color: var(--text--muted-color);
  }

  &-dropIndicator {
    position: absolute;
    height: px2rem(2px);
    background-color: var(--Tree-itemLabel--onChecked-color);
    border-radius: px2rem(1px);
    z-index: 1;

    &::after {
      position: absolute;
      top: px2rem(-3px);
      left: px2rem(-6px);
      width: px2rem(8px);
      height: px2rem(8px);
      background-color: transparent;
      border: px2rem(2px) solid var(--Tree-itemLabel--onChecked-color);
      border-radius: 50%;
      content: '';
    }

    &--hover {
      border-radius: 0;
      background-color: var(--Tree-item-onHover-bg);

      &::after {
        display: none;
      }
    }
  }
}