.lc-outline-pane {
  height: 100%;
  width: 100%;
  position: relative;

  > .lc-outline-tree-container {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    overflow: auto;
  }
}

.lc-outline-tree {
  @treeNodeHeight: 30px;
  overflow: hidden;
  margin-bottom: @treeNodeHeight;
  user-select: none;

  .tree-node-branches::before {
    position: absolute;
    display: block;
    width: 0;
    border-left: 1px solid transparent;
    height: 100%;
    top: 0;
    left: 6px;
    content: ' ';
    z-index: 2;
    pointer-events: none;
  }

  &:hover {
    .tree-node-branches::before {
      border-left-color: #ddd;
    }
  }

  .insertion {
    pointer-events: all !important;
    border: 1px dashed var(--color-brand-light);
    height: @treeNodeHeight;
    box-sizing: border-box;
    transform: translateZ(0);
    &.invalid {
      border-color: red;
      background-color: rgba(240, 154, 154, 0.719);
    }
  }

  .condition-group-container {
    border-bottom: 1px solid #7b605b;
    position: relative;

    &:before {
      position: absolute;
      display: block;
      width: 0;
      border-left: 0.5px solid #7b605b;
      height: 100%;
      top: 0;
      left: 0;
      content: ' ';
      z-index: 2;
    }
    >.condition-group-title {
      text-align: center;
      background-color: #7b605b;
      height: 14px;
      > .lc-title {
        font-size: 12px;
        transform: scale(0.8);
        transform-origin: top;
        color: white;
        text-shadow: 0px 0px 2px black;
        display: block;
      }
    }
  }
  .tree-node-slots {
    border-bottom: 1px solid rgb(144, 94, 190);
    position: relative;
    &::before {
      position: absolute;
      display: block;
      width: 0;
      border-left: 0.5px solid rgb(144, 94, 190);
      height: 100%;
      top: 0;
      left: 0;
      content: ' ';
      z-index: 2;
    }
    >.tree-node-slots-title {
      text-align: center;
      background-color: rgb(144, 94, 190);
      height: 14px;
      > .lc-title {
        font-size: 12px;
        transform: scale(0.8);
        transform-origin: top;
        color: white;
        text-shadow: 0px 0px 2px black;
        display: block;
      }
    }
    &.insertion-at-slots {
      padding-bottom: @treeNodeHeight;
      border-bottom-color: rgb(182, 55, 55);
      >.tree-node-slots-title {
        background-color: rgb(182, 55, 55);
      }
      &::before {
        border-left-color: rgb(182, 55, 55);
      }
    }
  }

  .tree-node {
    .tree-node-expand-btn {
      width: 12px;
      line-height: 0;
      align-self: stretch;
      display: flex;
      align-items: center;
      transition: color 200ms ease;
      color: var(--color-icon-normal);
      &:hover {
        color: var(--color-icon-hover);
      }
      > svg {
        transform-origin: center;
        transform: rotate(-90deg);
        transition: transform 100ms ease;
      }
      margin-right: 4px;
    }
    .tree-node-expand-placeholder {
      width: 12px;
      height: 12px;
      margin-right: 4px;
    }

    .tree-node-icon {
      transform: translateZ(0);
      display: flex;
      align-items: center;
      margin-right: 4px;
      color: var(--color-text);

      & > svg {
        width: 16px;
        height: 16px;
      }
    }

    .tree-node-title {
      font-size: var(--font-size-text);
      cursor: pointer;
      background: var(--color-pane-background);
      border-bottom: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
      display: flex;
      align-items: center;
      height: @treeNodeHeight;
      box-sizing: border-box;
      position: relative;
      transform: translateZ(0);
      padding-right: 5px;
      & > :first-child {
        margin-left: 2px;
      }

      .tree-node-title-label {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        align-self: stretch;
        overflow: visible;
        margin-right: 5px;

        .tree-node-title-input {
          flex: 1;
          border: 1px solid var(--color-brand-light);
          background-color: var(--color-pane-background);
          color: var(--color-text);
          line-height: 18px;
          padding: 2px;
          outline: none;
          margin-left: -3px;
          border-radius: 2px;
        }
      }

      .tree-node-hide-btn, .tree-node-lock-btn {
        opacity: 0;
        color: var(--color-text);
        line-height: 0;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        &:hover {
          opacity: 1 !important;
        }
      }
      &:hover {
        .tree-node-hide-btn, .tree-node-lock-btn {
          opacity: 0.5;
        }
      }
      html.lc-cursor-dragging & {
        // FIXME: only hide hover shows
        .tree-node-hide-btn, .tree-node-lock-btn {
          display: none;
        }
      }
      &.editing {
        & > .tree-node-hide-btn, & >.tree-node-lock-btn {
          display: none;
        }
      }

      .tree-node-tag {
        margin-left: 5px;
        display: flex;
        align-items: center;
        line-height: 0;
        &.cond {
          color: rgb(179, 52, 6);
        }
        &.loop {
          color: rgb(103, 187, 187);
        }
        &.slot {
          color: rgb(211, 90, 211);
        }
      }
    }

    &.is-root {
      > .tree-node-title {
        padding-left: 5px;
      }
    }

    &.expanded {
      & > .tree-node-title > .tree-node-expand-btn > svg {
        transform: rotate(0);
      }
    }

    &.hovering > .tree-node-title {
      background: var(--color-block-background-light);
    }

    // 选中节点处理
    &.selected {
      & > .tree-node-title {
        background: var(--color-block-background-shallow);
      }

      & > .tree-node-branches::before {
        border-left-color: var(--color-brand-light);
      }
    }

    &.hidden {
      .tree-node-title-label {
        color: #9b9b9b;
      }
      & > .tree-node-title > .tree-node-hide-btn {
        opacity: 0.8;
      }
      .tree-node-branches {
        .tree-node-hide-btn {
          opacity: 0;
        }
      }
    }

    &.condition-flow {
      & > .tree-node-title > .tree-node-hide-btn {
        opacity: 1;
      }
      &.hidden > .tree-node-title > .tree-node-hide-btn {
        opacity: 0;
      }
    }

    &.locked {
      & > .tree-node-title > .tree-node-lock-btn {
        opacity: 0.8;
      }
      .tree-node-branches {
        .tree-node-lock-btn, .tree-node-hide-btn {
          opacity: 0;
        }
      }
    }

    // 处理拖入节点
    &.dropping {
      & > .tree-node-branches::before {
        border-left: 1px solid var(--color-brand);
      }
      & > .tree-node-title {
        .tree-node-expand-btn {
          color: var(--color-brand);
        }
        .tree-node-icon {
          color: var(--color-brand);
        }
        .tree-node-title-label > .lc-title {
          color: var(--color-brand);
        }
      }
    }
    &.highlight {
      & > .tree-node-title {
        background: var(--color-block-background-shallow);
      }
    }

    .tree-node-branches {
      padding-left: 12px;
      position: relative;
    }
  }
}