.dao-steps {
  font-size: 1.2rem;
  line-height: 20px;
}
.dao-steps--horizontal .dao-steps-ul {
  display: flex;
  padding: 20px 0 16px;
  margin: auto;
  list-style: none;
}
.dao-steps--horizontal .dao-steps-ul .dao-steps-li {
  display: inline-flex;
  flex-direction: column;
  width: 150px;
}
.dao-steps--horizontal .dao-steps-ul .dao-steps-li__status-icon {
  margin: 0 auto 10px;
}
.dao-steps--horizontal .dao-steps-ul .dao-steps-li:not(:first-child) {
  margin-left: 20px;
}
.dao-steps--horizontal .dao-steps-ul .dao-steps-li:not(:first-child).dao-steps-li__status::before {
  position: absolute;
  top: 9px;
  right: 95px;
  display: block;
  width: 130px;
  content: "";
  border-top: 2px solid var(--dao-gray-blue-050);
}
.dao-steps--horizontal .dao-steps-ul .dao-steps-li:not(:first-child).dao-steps-li__status.active::before {
  border-top-color: var(--dao-bg-component-selected);
  border-top-style: dashed;
}
.dao-steps--horizontal .dao-steps-ul .dao-steps-li:not(:first-child).dao-steps-li__status.success::before {
  border-top-color: var(--dao-bg-component-selected);
  border-top-style: solid;
}
.dao-steps--horizontal .dao-steps-ul .dao-steps-li__label {
  text-align: center;
}
.dao-steps--vertical .dao-steps-li {
  display: flex;
  min-height: 64px;
}
.dao-steps--vertical .dao-steps-li:not(:last-child)::before {
  position: absolute;
  top: 25px;
  left: 9px;
  display: block;
  width: 0;
  height: calc(100% - 20px - 10px);
  content: "";
  border-right: 2px solid var(--dao-gray-blue-050);
}
.dao-steps--vertical .dao-steps-li:not(:last-child).success::before {
  border-right-color: var(--dao-bg-component-selected);
  border-right-style: solid;
}
.dao-steps--vertical .dao-steps-li:not(:last-child).pre-active::before {
  border-right-color: var(--dao-bg-component-selected);
  border-right-style: dashed;
}
.dao-steps--vertical .dao-steps-li__label {
  margin-left: 10px;
  text-align: left;
}
.dao-steps-li {
  position: relative;
  font-size: 1.2rem;
  text-align: center;
}
.dao-steps-li__status-icon {
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--dao-gray-010);
  background-color: var(--dao-gray-blue-050);
  border-radius: 50%;
}
.dao-steps-li__status-icon__num {
  vertical-align: baseline;
}
.dao-steps-li__status-icon.success {
  color: var(--dao-bg-component-selected);
  background-color: var(--dao-acidblue-090);
  border: 1px solid var(--dao-acidblue-070);
}
.dao-steps-li__status-icon.active {
  color: var(--dao-pure-white);
  background-color: var(--dao-bg-component-selected);
}
.dao-steps-li__label {
  font-weight: 400;
  line-height: 20px;
  color: var(--dao-gray-010);
}
.dao-steps-li__label--helper {
  margin-top: 2px;
  line-height: 18px;
  color: var(--dao-gray-070);
}

.dao-steps--compact .dao-steps-ul {
  padding: 8px 20px;
}
.dao-steps--compact .dao-steps-ul .dao-steps-li {
  flex-direction: initial;
  align-items: center;
  width: auto;
}
.dao-steps--compact .dao-steps-ul .dao-steps-li__status-icon {
  width: 16px;
  height: 16px;
  margin: 0;
  line-height: 16px;
}
.dao-steps--compact .dao-steps-ul .dao-steps-li:not(:first-child) {
  margin-left: 8px;
}
.dao-steps--compact .dao-steps-ul .dao-steps-li:not(:first-child).dao-steps-li__status::before {
  display: none;
}
.dao-steps--compact .dao-steps-ul .dao-steps-li__label {
  margin: 0 8px 0 6px;
}
.dao-steps--compact .dao-steps-ul .dao-steps-li__icon-next {
  font-size: 1.2rem;
  color: var(--dao-text-tertiary);
}