.dag-extension-container {
  @keyframes xflow-processing-line {
    to {
      stroke-dashoffset: -1000;
    }
  }
  .x6-edge {
    // 系统状态
    stroke-width: 1px;
    &.success {
      path:nth-child(2) {
        stroke: #d5d5d5 !important;
      }
      path:nth-child(3) {
        fill: #d5d5d5 !important;
        stroke: #d5d5d5 !important;
      }
    }
    &.error {
      stroke-width: 2px;
      path:nth-child(2) {
        stroke: rgba(245, 34, 45, 0.45) !important;
        stroke-width: 2px;
      }
    }
    &.processing {
      path:nth-child(2) {
        animation: ~'xflow-processing-line 30s infinite linear';
        stroke: rgba(57, 202, 116, 0.8);
        stroke-width: 2px;
        stroke-dasharray: 8px, 2px;
      }
    }
    // 交互状态
    &.x6-edge-selected {
      path:nth-child(2) {
        stroke: #1890ff;
        stroke-width: 2px;
      }
    }
    &:hover {
      path:nth-child(2) {
        stroke: #1890ff;
        stroke-width: 2px;
      }
    }
    &.hoverHighlight {
      path:nth-child(2) {
        stroke: #1890ff;
        stroke-width: 2px;
      }
    }
  }
  // 连线状态
  .x6-port {
    .xflow-port-group {
      // 默认状态
      .xflow-port-arrow {
        display: none;
      }
      // 可用状态
      &.available {
        .xflow-port {
          stroke: rgba(57, 202, 116, 0.6);
          r: 8;
          stroke-width: 8px;
        }
      }
      // 已连接箭头
      &.connected {
        .xflow-port-arrow {
          display: block;
        }
        .xflow-port {
          display: none;
        }
      }
      // 吸附状态
      &.adsorbed {
        .xflow-port {
          stroke: rgba(57, 202, 116, 0.85);
          r: 10;
          stroke-width: 10px;
        }
      }
    }
  }
}

.layout-top-bottom {
  // 连线状态
  .x6-port {
    .xflow-port-group {
      // 默认状态
      .xflow-port-arrow {
        display: none;
      }

      // 已连接箭头
      &.connected {
        .xflow-port-arrow {
          display: block;
        }
        .xflow-port {
          display: none;
        }
      }
    }
  }
}

.layout-left-right {
  // 连线状态
  .x6-port {
    .xflow-port-group {
      // 默认状态
      .xflow-port-arrow {
        display: none;
      }

      // 已连接箭头
      &.connected {
        .xflow-port-arrow {
          display: block;
          transform: ~'translate(0, 5px) rotate(270deg) !important';
        }
        .xflow-port {
          display: none;
        }
      }
    }
  }
}