.ui-tree {
  /* 收缩控件大小 */
  --ctrl-size: 14px;
  /* 左边留白大小 */
  --padding-size: 20px;
  // 底部margind大小
  --margin-size: 20px;
  --border-style: dashed;
  --border-width: 1px;
  
  // 用于计算，防止样式覆盖而失效
  --calc-size: var(--padding-size);
  --half-ctrl: calc(var(--ctrl-size) / 2);
  --half-margin: calc(var(--margin-size) / 2);

  &.flat {
    .ui-tree-item {
      --padding-size: 20px;
      // padding-left: 0;
      margin-left: calc(-1 * var(--padding-size));
    }
  }

  color: var(--colors-normal-base);;

  .ui-tree-item{
    list-style: none;
    padding-left: var(--padding-size);
    position: relative;

    &.un-children {
      --padding-size: 0;
    }
  }

  .ui-tree-content {
    margin-bottom: var(--margin-size);
    position: relative;
  }

  .ui-tree-ctrl {
    position: absolute;
    width: var(--ctrl-size);
    height: var(--ctrl-size);
    left: calc(var(--padding-size) * -1);
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid currentColor;
    line-height: var(--ctrl-size);
    border-radius: calc(var(--ctrl-size) / 6);
    cursor: pointer;

    &::before,
    &::after {
      content: '';
      height: 1px;
      width: 60%;
      background-color: currentColor;
      position: absolute;
      left: 50%;
      top: 50%;
    }

    &::before {
      transform: translate(-50%, -50%);
    }

    &::after {
      transform: translate(-50%, -50%) rotateZ(90deg);
      transition: transform .3s ease;
    }

    &.open::after {
      transform: translate(-50%, -50%) rotateZ(90deg) scale(0);
    }
  }
  .ui-tree-item-child {
    --offset: calc(var(--calc-size) * 2);
    width: calc(100% + var(--offset));
    padding-left: var(--offset);
    margin-left: calc(-1 * var(--offset));
    padding-top: var(--margin-size);
    margin-top: calc(-1 * var(--margin-size));
    // overflow: hidden;
    transition: all .3s ease !important;
  }

  &.stroke {
    --slideWidth: calc(var(--padding-size) - var(--half-ctrl));

    .ui-tree-auxiliary::after,
    .ui-tree-auxiliary::before,
    .ui-tree-item::before,
    .ui-tree-content::after {
      content: '';
      position: absolute;
    }

    .ui-tree-content::after {
      left: calc(var(--padding-size) * -1);
      width: var(--slideWidth);
      border-bottom: var(--border-width) var(--border-style) currentColor;
      top: 50%;
      transform: translateX(-100%) translateY(-50%);
    }

    .ui-tree-auxiliary::after,
    .ui-tree-auxiliary::before,
    .ui-tree-item.un-children:last-child::before,
    .ui-tree-item:not(:last-child):before {
      border-left: var(--border-width) var(--border-style) currentColor;
      transform: translateX(calc(var(--slideWidth) * -1));
      left: 0;
    }

    .ui-tree-item:not(:last-child):before  {
      top: 0;
      bottom: calc(-1 * var(--half-ctrl));
    }

    .ui-tree-item.un-children:last-child::before {
      top: 0;
      bottom: calc(50% + var(--half-margin));
    }

    .ui-tree-auxiliary::before,
    .ui-tree-auxiliary::after {
      height: calc(50% - var(--half-ctrl));
      transition: height .3s ease
    }

    .ui-tree-auxiliary::before {
      height: calc(50% - var(--half-ctrl));
      left: calc(var(--padding-size) * -1);
      top: var(--half-ctrl);
    }

    .ui-tree-auxiliary::after {
      height: calc(50% - var(--half-ctrl) + var(--margin-size));
      bottom: calc(-1 * var(--margin-size));
    }
    
    .first.ui-tree-auxiliary::before {
      display: none;
    }

    .alone .ui-tree-auxiliary::before {
      display: inherit;
      height: 50%;
      top: 0;
    }

    &:not(.children) > {
      .ui-tree-item > .ui-tree-content > .ui-tree-auxiliary::before,
      .ui-tree-item::before,
      .ui-tree-item > .ui-tree-content::after {
        display: none;
      }
    }

    .ui-tree-item.put {
      .ui-tree-item-child {
        padding-top: 0;
        margin-top: 0;
      }

      > .ui-tree-content .ui-tree-auxiliary::after {
        height: 0;
      }
    }
  }

}