@step-title-height: 24px;
@step-icon-size: 16px;
// @step-dot-size: 10px;

.Stepper {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.Step {
  position: relative;
  padding-left: (@step-icon-size + 3px);
  padding-bottom: 9px;

  &:last-child {
    padding-bottom: 0;

    .Step-line {
      bottom: 0;
    }
  }
}

.Step--active {
  .Step-dot {
    border-color: var(--brand-1);
    background: var(--brand-1);
  }
  .Step-title {
    span {
      color: var(--brand-1);
      font-weight: 600;
    }
  }
  .Step-desc {
    color: var(--color-text-1);
  }
  &[data-status] {
    .Step-line {
      top: (@step-title-height / 2 + @step-icon-size / 2 + 2px);
    }
    .Step-icon {
      color: var(--red);
    }
  }
  &[data-status='success'] {
    .Step-icon {
      color: var(--green);
    }
  }
}

.Step-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: @step-icon-size;
  height: @step-title-height;
  font-size: @step-icon-size;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Step-dot {
  width: 10px;
  height: 10px;
  background: var(--color-fill-1);
  border: 1px solid var(--color-line-2);
  border-radius: 50%;
  box-sizing: border-box;
}

.Step-line {
  position: absolute;
  top: (@step-title-height / 2 + @step-icon-size / 2);
  left: (@step-icon-size / 2);
  bottom: -4px;
  width: 1px;
  background: var(--color-line-2);
  transform: translateX(-50%) scaleX(0.5);
}

.Step-title {
  display: flex;
  align-items: center;
  color: var(--color-text-3);
  font-size: var(--font-size-md);

  .Card & {
    font-size: 15px;
  }
  small {
    margin-left: 12px;
    color: var(--color-text-3);
    font-size: var(--font-size-xs);
  }
}

.Step-desc {
  margin-top: 6px;
  color: var(--color-text-3);
  font-size: var(--font-size-sm);
}