:root {
  --step-tag-size: 20px;
  --step-tag-background: #c0c4cc;
  --step-tag-font-size: var(--font-size-md);
  --step-tag-color: #fff;
  --step-tag-active-color: var(--color-primary);
  --step-tag-margin: 4px 0;
  --step-tag-icon-size: var(--font-size-lg);
  --step-content-font-size: var(--font-size-md);
  --step-content-color: var(--color-desc);
  --step-content-active-color: var(--color-main);
  --step-line-background: var(--color-main);
  --step-vertical-min-height: 30px;
  --step-vertical-tag-margin: 0 4px;
  --step-vertical-line-height: calc(70%);
  --step-vertical-line-min-height: 20px;
}
.tag {
  width: var(--step-tag-size);
  height: var(--step-tag-size);
  background: var(--step-tag-background);
  display: flex;
  font-size: var(--step-tag-font-size);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--step-tag-color);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: 0.3s var(--cubic-bezier);
}
.content {
  font-size: var(--step-content-font-size);
  color: var(--step-content-color);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: 0.3s var(--cubic-bezier);
}
.ppsv-step {
  display: flex;
  position: relative;
  flex: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ppsv-step-horizontal {
  display: flex;
  width: 100%;
}
.ppsv-step-horizontal__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 100%;
}
.ppsv-step-horizontal__tag {
  margin: var(--step-tag-margin);
  width: var(--step-tag-size);
  height: var(--step-tag-size);
  background: var(--step-tag-background);
  display: flex;
  font-size: var(--step-tag-font-size);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--step-tag-color);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: 0.3s var(--cubic-bezier);
}
.ppsv-step-horizontal__tag--active {
  background: var(--step-tag-active-color);
}
.ppsv-step-horizontal__content {
  font-size: var(--step-content-font-size);
  color: var(--step-content-color);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: 0.3s var(--cubic-bezier);
}
.ppsv-step-horizontal__content--active {
  color: var(--step-content-active-color);
}
.ppsv-step-horizontal__line {
  position: relative;
  top: 14px;
  flex: 1;
  height: 1px;
  transform: scaleY(0.5);
  background: var(--step-line-background);
}
.ppsv-step-vertical {
  width: 100%;
}
.ppsv-step-vertical__main {
  display: flex;
  align-items: flex-start;
  min-height: var(--step-vertical-min-height);
}
.ppsv-step-vertical__tag {
  margin: var(--step-vertical-tag-margin);
  width: var(--step-tag-size);
  height: var(--step-tag-size);
  background: var(--step-tag-background);
  display: flex;
  font-size: var(--step-tag-font-size);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--step-tag-color);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: 0.3s var(--cubic-bezier);
}
.ppsv-step-vertical__tag--active {
  background: var(--step-tag-active-color);
}
.ppsv-step-vertical__content {
  font-size: var(--step-content-font-size);
  color: var(--step-content-color);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: 0.3s var(--cubic-bezier);
}
.ppsv-step-vertical__content--active {
  color: var(--step-content-active-color);
}
.ppsv-step-vertical__line {
  position: relative;
  height: var(--step-vertical-line-height);
  left: 14px;
  top: calc(-55%);
  min-height: var(--step-vertical-line-min-height);
  width: 1px;
  transform: scaleX(0.5);
  background: var(--step-line-background);
}
.ppsv-step__icon[ppsv-step-cover] {
  font-size: var(--step-tag-icon-size);
}