/** LX Step 任务流程步骤 */

.lx-steps {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-step {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
  padding-right: var(--lx-space-12);
}

.lx-step:last-child {
  padding-right: 0;
}

.lx-step::after {
  position: absolute;
  top: 15px;
  right: 0;
  left: 34px;
  height: 1px;
  background: var(--lx-color-border);
  content: "";
}

.lx-step:last-child::after {
  display: none;
}

.lx-step__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--lx-space-8);
}

.lx-step__marker {
  display: inline-grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--lx-color-border-strong);
  border-radius: 50%;
  color: var(--lx-color-text-tertiary);
  font-size: var(--lx-font-size-xs);
  font-weight: var(--lx-font-weight-semibold);
  background: var(--lx-color-bg-card);
}

.lx-step__content {
  min-width: 0;
  padding-top: 4px;
  padding-right: var(--lx-space-8);
}

.lx-step__title {
  display: block;
  overflow: hidden;
  color: var(--lx-color-text-secondary);
  font-size: var(--lx-font-size-sm);
  font-weight: var(--lx-font-weight-medium);
  line-height: var(--lx-line-height-control);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lx-step__description {
  display: block;
  margin-top: var(--lx-space-4);
  color: var(--lx-color-text-tertiary);
  font-size: var(--lx-font-size-xs);
  line-height: var(--lx-line-height-normal);
}

.lx-step.is-complete .lx-step__marker {
  border-color: var(--lx-color-success);
  color: var(--lx-color-text-inverse);
  background: var(--lx-color-success);
}

.lx-step.is-complete::after {
  background: var(--lx-color-success);
}

.lx-step.is-current .lx-step__marker {
  border-color: var(--lx-color-primary);
  color: var(--lx-color-primary);
  box-shadow: 0 0 0 3px var(--lx-color-focus-ring);
}

.lx-step.is-current .lx-step__title {
  color: var(--lx-color-primary-active);
  font-weight: var(--lx-font-weight-semibold);
}

.lx-step.is-error .lx-step__marker {
  border-color: var(--lx-color-danger);
  color: var(--lx-color-text-inverse);
  background: var(--lx-color-danger);
}

.lx-step.is-error .lx-step__title {
  color: var(--lx-color-danger);
}

.lx-steps--vertical {
  display: grid;
}

.lx-steps--vertical .lx-step {
  min-height: 76px;
  padding: 0 0 var(--lx-space-20);
}

.lx-steps--vertical .lx-step::after {
  top: 34px;
  bottom: 0;
  left: 15px;
  width: 1px;
  height: auto;
}

.lx-steps--vertical .lx-step__content {
  padding-top: 4px;
}

@media (max-width: 767px) {
  .lx-steps--responsive {
    display: grid;
  }

  .lx-steps--responsive .lx-step {
    min-height: 70px;
    padding: 0 0 var(--lx-space-16);
  }

  .lx-steps--responsive .lx-step::after {
    top: 34px;
    bottom: 0;
    left: 15px;
    width: 1px;
    height: auto;
  }

  .lx-steps--responsive .lx-step__title {
    white-space: normal;
  }
}