@opensig/opendesign/lib/step/style/index.css

.o-step {
  --step-item-head-size: var(--o-font_size-h4);
  --step-item-head-height: var(--o-line_height-h4);
  --step-item-title-size: var(--o-font_size-text1);
  --step-item-title-height: var(--o-line_height-text1);
  --step-item-title-font-weight: normal;
  --step-item-desc-size: var(--o-font_size-tip2);
  --step-item-desc-height: var(--o-line_height-tip2);
  --step-item-head-width: var(--o-icon_size_control-l);
  --step-item-icon-size: var(--o-icon_size-m);
  --step-item-gap: 8px;
  --step-item-main-gap: 8px;
  --step-item-desc-gap: 4px;
  --step-item-line-gap: 8px;
  --step-item-line-height: 1px;
  --step-item-align: center;
  --step-item-head-bg: var(--o-color-success1);
  --step-item-head-color: var(--o-color-white);
  --step-item-title-color: var(--o-color-info2);
  --step-item-desc-color: var(--o-color-info3);
  --step-item-line-bg: var(--o-color-control4);
  --step-item-main-padding: 0 12px;
}

.o-step-v {
  --step-item-align: left;
  --step-item-main-gap: 0;
  --step-item-main-padding: 0;
}

.o-step-item-processing {
  --step-item-head-bg: var(--o-color-primary1);
  --step-item-line-bg: var(--o-color-primary1);
  --step-item-title-color: var(--o-color-primary1);
  --step-item-title-font-weight: 600;
}

.o-step-item-waiting {
  --step-item-head-bg: var(--o-color-primary4);
  --step-item-line-bg: var(--o-color-control4);
  --step-item-title-color: var(--o-color-info3);
  --step-item-desc-color: var(--o-color-info3);
}

.o-step-item-failed {
  --step-item-head-bg: var(--o-color-danger1);
  --step-item-line-bg: var(--o-color-control4);
}

.o-step {
  display: flex;
  text-align: var(--step-item-align);
  justify-content: space-between;
}

.o-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.o-step-item-head {
  position: relative;
  flex-shrink: 0;
  font-size: var(--step-item-head-size);
  line-height: var(--step-item-head-height);
  color: var(--step-item-head-color);
}

.o-step-item-line {
  height: unset;
  width: unset;
  position: absolute;
  margin: 0;
  right: var(--o-step-item-right);
  left: var(--o-step-item-left);
  top: var(--o-step-item-top);
  bottom: var(--o-step-item-bottom);
  background-color: var(--step-item-line-bg);
}

.o-step-item-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--step-item-head-width);
  height: var(--step-item-head-width);
  background-color: var(--step-item-head-bg);
  border-radius: 50%;
}
.o-step-item-symbol.o-step-item-symbol-custom {
  background-color: unset;
}

.o-step-item-icon {
  font-size: var(--step-item-icon-size);
}

.o-step-item-main {
  margin-top: var(--step-item-main-gap);
  padding: var(--step-item-main-padding);
}

.o-step-item-title {
  font-size: var(--step-item-title-size);
  line-height: var(--step-item-title-height);
  color: var(--step-item-title-color);
  word-break: break-word;
  font-weight: var(--step-item-title-font-weight);
}

.o-step-item-desc {
  margin-top: var(--step-item-desc-gap);
  font-size: var(--step-item-desc-size);
  line-height: var(--step-item-desc-height);
  color: var(--step-item-desc-color);
  word-break: break-word;
}

.o-step-v {
  flex-direction: column;
}

.o-step-item-v {
  flex-direction: row;
  align-items: start;
  gap: var(--step-item-gap);
}

.o-step-item-v + .o-step-item-v {
  margin-top: var(--step-item-gap);
}

.o-step-item-v .o-step-item-title {
  line-height: var(--step-item-head-width);
}

@media (max-width: 1680px) {
  .o-step {
    --step-item-head-width: var(--o-icon_size_control-m);
    --step-item-icon-size: var(--o-icon_size-s);
    --step-item-head-size: var(--o-font_size-text1);
    --step-item-head-height: var(--o-line_height-text1);
    --step-item-title-size: var(--o-font_size-tip1);
    --step-item-title-height: var(--o-line_height-tip1);
  }
}
@media (max-width: 840px) {
  .o-step {
    --step-item-head-size: var(--o-font_size-tip1);
    --step-item-head-height: var(--o-line_height-tip1);
    --step-item-title-size: var(--o-font_size-tip2);
    --step-item-title-height: var(--o-line_height-tip2);
  }
}