@import './token.less';

.@{ns}-Tree {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: @size-2 0;
  .@{ns}-Transfer2-search{
    padding-top: 0;
  }
  &-placeholder{
    flex: 1;
    // position: absolute;
    // top: 0;
    // right: 0;
    // bottom: 0;
    // left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-list,
  &-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
  }


  &-sublist {
    margin-left: @Tree-indent;
  }

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

  &-item {
    line-height: @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: 16px;
      //   height: 16px;
      //   margin-left: @Tree-icon-gap;
      // }
    }
  }

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

  &.is-draggable {
    position: relative;
  }

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

  &-rootItem {
    line-height: @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;
    user-select: none;
    margin-bottom: 4px;
    padding-left: @Tree-icon-gap;
    & > * {
      position: relative;
      z-index: 2;
    }
    > .@{ns}-Checkbox {
      display: inline-flex;
      align-self: center;
    }
    &-item {
      padding-left: @Tree-item-arrow-padding-left;
      display: inline-flex;
      width: 100%;
      align-items: center;
      // overflow: hidden;
      height: @Tree-itemHeight;
      line-height: @Tree-itemHeight;
    }

    &:hover{
      color: var(--primary-color);
    }
    &.is-children-checked{
    }
  }

  .@{ns}-Transfer2-tree-item{
    .is-checked:not(.is-multiple) {
      // background-color: @Tree-item-onHover-bg;
    }
  }
  &-item {
      .is-checked:not(.is-multiple) {
        background: @Tree-item-onChekced-bg;
        border-radius: @Tree-item-onChekced-bg-borderRadius;
      
        .rightExtraTrigger-hover{
          visibility: visible;
        }
      }
    .is-disabled {
      color: var(--color-text-4);
      background: none;
      &:hover {
        background: none;
      }
    }
  }

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

  .@{ns}-Tree-itemLabel-item:hover{
    .rightExtraTrigger-hover{
      visibility: visible;
    }
  }

  &-item-icons {
    visibility: hidden;
    transition: visibility @animation-duration-3 ease;
    display: inline-block;
    vertical-align: top;
    height: @Tree-itemHeight;
    line-height: @Tree-itemHeight;
    width: @Tree-itemHeight;
    &.rightExtraTrigger-show{
      visibility: visible;
    }
 
    .@{ns}-Button--iconOnly{
      min-width: @Tree-itemHeight !important;
      height: @Tree-itemHeight;
    }

    > span {
      display: inline-block;
      vertical-align: middle;
      margin: 0 @Tree-icon-gap;
      color: var(--primary-color);
      cursor: pointer;

      > svg {
        @svgSize: 12px;
        width: @svgSize;
        height: @svgSize;
        top: 0;
      }
    }
  }

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

    > a {
      display: inline-block;
      cursor: pointer;
      margin-left: @Tree-icon-gap;
      color: inherit;

      &:hover {
        color: var(--primary-3);
        text-decoration: none;
      }
    }

    > input {
      flex-grow: 1;
      width: 100%;
      outline: none;
      background: var(--color-bg-1);
      border: 1px solid var(--color-border);
      border-radius: @border-radius;
      line-height: 1.4285714286;
      padding: calc(
          (
              @Tree-inputHeight - 1.4285714286 *
                13px - 2px
            ) / 2
        )
        8px;
      font-size: 12px;

      &::placeholder {
        color: var(--color-text-3);
        user-select: none;
      }

      &:focus {
        border-color: var(--primary);
        box-shadow: none;
        background: var(--color-bg-1);
      }
    }
  }

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

    &:hover {
      text-decoration: none;
    }

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

    > svg {
      @svgSize: 14px;
      width: @svgSize;
      height: @svgSize;
      top: @svgSize * 0.125;
      margin-right: @Tree-icon-gap;
    }
  }

  &-itemArrow {
    cursor: pointer;
    width: @Tree-itemArrowWidth;
    display: inline-flex;
    // margin-right: @Tree-icon-margin-right;

    .@{ns}-Icon {
        // width: @Tree-itemArrowWidth;
        // height: @Tree-itemArrowWidth;
        font-size: @Tree-itemArrowWidth;
        display: block;
        transition: transform @animation-duration-3;
        top: 0;
    }

    &.is-folded > .@{ns}-Icon {
      transform: rotate(-90deg);
    }
  }

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

  &-itemDrager {
    cursor: move;
    color: inherit;
  }

  &-spinner {
    margin-right: @Tree-icon-gap;
  }

  &-itemIcon {
    display: inline-flex;
    color: var(--primary-color);
    margin-right: 2px;
    font-size: 14px;
  }

  &-rootIcon,
  &-folderIcon,
  &-leafIcon {
    cursor: pointer;
    // > svg {
    //   top: 0;
    //   width: 14px;
    //   height: 14px;
    // }
  }


  &-itemText {
    cursor: pointer;
    flex: 1 auto;
    line-height: @line-height-base;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .is-disabled &-itemText {
    color: var(--primary-onDisabled-color);
    cursor: not-allowed;
  }

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

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

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

    &--hover {
      border-radius: 0;
      background-color: @Tree-item-onHover-bg;

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

  .@{ns}-Transfer2-search{
    flex: 1;
  }
}

.@{ns}-PopUp {
  .@{ns}-Tree {
    flex: 1;

    .@{ns}-Tree-itemLabel {
      &:hover {
        .@{ns}-Tree {
          &-itemLabel-item {
            background-color: none !important;
          }
        }
      }
    }
  }
}