.process-container {
    position        : relative;
    display         : flex;
    justify-content : space-between;
}

.process-container .progress-item {
    display    : inline-flex;
    position   : relative;
    text-align : left;
    color      : var(--basic-gray-light);
}

.process-container .progress-item + .progress-item {
    width      : 100%;
    text-align : center;
}

.process-container .progress-item:last-child {
    width      : 100%;
    text-align : right;
}

.process-container .progress-item::before {
    position         : absolute;
    content          : '';
    top              : 8px;
    transform        : var(--translate-tb-center);
    right            : 0;
    left             : 0;
    width            : 100%;
    height           : 1px;
    z-index          : -1;
    background-color : var(--basic-gray-high-light);
}

.process-container .progress-item.active {
    color : var(--basic-black);
}

.process-container .progress-item.active::before {
    background-color : var(--brand-primary-opacity);
}

.process-container .progress-item .progress-img {
    content       : url("/resources/assets/icon/progress-default.svg");
    margin-bottom : 8px;
}

.process-container .progress-item.active .progress-img {
    content : url("/resources/assets/icon/progress-checked.svg");
}