/** 流程容器 */
.process-flow-container {
    width: 100%;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;

    /** 流程节点 */
    .process-node {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        /** 节点图标基础样式 */
        .node-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            color: #fff;
        }
        
        /** 节点文本基础样式 */
        .node-text {
            font-size: 14px;
            line-height: 22px;
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
        }
    }
    
    /** 节点连接线基础样式 */
    .node-connector {
        width: 80px;
        height: 2px;
        margin: 0 4px;
        position: relative;
        top: -16px; // 使连接线与图标中心对齐：-(24px高度 + 8px底部margin) / 2
    }
}

/** 
 * 节点状态样式
 * 包含三种状态：已完成、进行中、未开始
 */

/** 1. 已完成状态样式 */
.node-icon-completed {
    background-color: #e8f3ff;
    &::after {
        content: "";
        width: 12px;
        height: 12px;
        background-image: url('../../../../assets/img/suceess.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
    }
}

.node-text-completed {
    color: #171A1D;
    opacity: 1;
}

.connector-completed {
    background-color: #1a6fb8;
}

/** 2. 进行中状态样式 */
.node-icon-in-progress {
    background-color: #1a6fb8;
    color: white;
}

.node-text-in-progress {
    color: #1A6FB8;
    opacity: 1;
}

.connector-in-progress {
    background-color: #e8f3ff;
}

/** 3. 未开始状态样式 */
.node-icon-not-started {
    background-color: #86909c;
    color: white;
}

.node-text-not-started {
    color: #171A1D;
    opacity: 0.4;
}

.connector-not-started {
    background-color: #86909c;
}

/** 
 * 以下是旧版样式，保留以便向后兼容
 * 建议后续迭代移除
 */
.node-icon-active {
    background-color: #1890ff;
}

.node-icon-inactive {
    background-color: #ccc;
}

.node-text-active {
    color: #1890ff;
}

.node-text-inactive {
    color: #999;
}

.connector-active {
    background-color: #1890ff;
}

.connector-inactive {
    background-color: #ccc;
}