@import '../styles/themes/themes.less';
@import '../styles/mixins/scroll.less';
@import '../virtual-render/virtual-render.less';
@import '../checkbox/checkbox.less';

.@{bk-prefix}-tree {
  font-size: 14px;
  position: relative;

  .@{bk-prefix}-node-row {
    padding-left: calc(var(--offset-left));
    position: relative;

    &:hover {
      background-color: #f5f7fa;
    }

    &.is-selected {
      background-color: #ebf2ff;

      &:hover {
        background-color: #e1ecff;
      }
    }

  }

  &-node {
    position: relative;
    display: flex;
    height: var(--lineHeight);
    padding-left: 0;
    line-height: var(--lineHeight);
    cursor: pointer;
    align-items: center;

    &:not(.is-root) {
      margin-left: calc(var(--depth)*var(--indent));

      &.level-line {

        .@{bk-prefix}-node-action {
          &.empty-child {
            position: relative;

            &::before {
              position: absolute;
              top: calc(50% + 1px);
              left: 0;
              right: 0;
              z-index: 1;
              height: 0;
              pointer-events: none;
              border-bottom: var(--level-line);
              content: '';
            }
          }
        }

        &::before {
          position: absolute;
          top: calc(50% + 1px);
          left: calc(0px - var(--indent) + 6px);
          z-index: 1;
          width: calc(var(--indent) - 6px);
          height: 0;
          pointer-events: none;
          border-bottom: var(--level-line);
          content: '';
        }
      }
    }

    &.is-open {
      .@{bk-prefix}-node-action {
        color: #63656e;
      }
    }


    .node-virtual-line {
      position: absolute;
      top: -12px;
      bottom: 50%;
      left: calc(var(--depth) * var(--indent) * -1 + 6px);
      display: inline-block;
      width: 0;
      border-left: var(--level-line);
    }

    .@{bk-prefix}-node-prefix {
      display: flex;
      width: 14px;
      height: 14px;
      align-items: center;
      justify-content: center;
    }

    .@{bk-prefix}-node-action {
      margin-right: 6px;
      color: #979ba5;
      min-width: 14px;
    }

    .@{bk-prefix}-tree-icon {
      margin: 0 6px 0 4px;
    }

    .@{bk-prefix}-node-content {
      display: flex;
      flex: 1;
      align-items: center;
      min-width: 0;

      .node-check-box {
        display: inline-flex;
      }

      .@{bk-prefix}-checkbox {
        margin: 0;

        .@{bk-prefix}-checkbox-input {
          margin: 0;
        }
      }

      .@{bk-prefix}-node-text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  &-node-draggable {
    cursor: grab;
    user-select: none;

    &:hover {
      background-color: #f5f7fa;
    }
  }

  &-drop-disabled {
    cursor: no-drop;
    opacity: 0.5;
  }

  &-drag {
    opacity: 0.85;
    cursor: grabbing;
  }

  &-drag-disabled {
    cursor: no-drop;
    opacity: 0.5;
  }

  &-drop-before,
  &-drop-after,
  &-drop-inner {
    background-clip: content-box;
  }

  &-drop-before,
  &-drop-after {
    &::after {
      position: absolute;
      right: 0;
      left: var(--drop-line-left, 0);
      display: block;
      height: 2px;
      border-radius: 1px;
      background-color: #3a84ff;
      content: '';
      pointer-events: none;
    }
  }

  &-drop-before::after {
    top: -1px;
  }

  &-drop-after::after {
    bottom: -1px;
  }

  &-drop-inner {
    background-color: rgba(58, 132, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(58, 132, 255, 0.28);
  }
}
