zhsw_wechat/miniprogram_npm/tdesign-miniprogram/step-item/step-item.wxss

.t-float-left {
  float: left;
}
.t-float-right {
  float: right;
}
@keyframes tdesign-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.hotspot-expanded.relative {
  position: relative;
}
.hotspot-expanded::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: scale(1.5);
}
.t-steps-item {
  flex: 1;
  vertical-align: top;
  position: relative;
  display: flex;
}
.t-steps-item__circle--default {
  color: var(--td-step-item-default-circle-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
  background-color: var(--td-step-item-default-circle-bg, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
}
.t-steps-item__title--default {
  color: var(--td-step-item-default-title-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
}
.t-steps-item__icon--default {
  color: var(--td-step-item-default-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
}
.t-steps-item__dot--default {
  border-color: var(--td-step-item-default-dot-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  background-color: var(--td-step-item-default-dot-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
}
.t-steps-item__circle--process {
  color: var(--td-step-item-process-circle-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
  background-color: var(--td-step-item-process-circle-bg, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__title--process {
  color: var(--td-step-item-process-title-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__icon--process {
  color: var(--td-step-item-process-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__dot--process {
  border-color: var(--td-step-item-process-dot-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  background-color: var(--td-step-item-process-dot-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__circle--finish {
  color: var(--td-step-item-finish-circle-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  background-color: var(--td-step-item-finish-circle-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
}
.t-steps-item__title--finish {
  color: var(--td-step-item-finish-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
.t-steps-item__icon--finish {
  color: var(--td-step-item-finish-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__dot--finish {
  border-color: var(--td-step-item-finish-dot-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  background-color: var(--td-step-item-finish-dot-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__circle--error {
  color: var(--td-step-item-error-circle-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  background-color: var(--td-step-item-error-circle-bg, var(--td-error-color-1, #fff0ed));
}
.t-steps-item__title--error {
  color: var(--td-step-item-error-title-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
}
.t-steps-item__icon--error {
  color: var(--td-step-item-error-icon-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
}
.t-steps-item__dot--error {
  border-color: var(--td-step-item-error-dot-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  background-color: var(--td-step-item-error-dot-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
}
.t-steps-item--horizontal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.t-steps-item__anchor {
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-steps-item__anchor--vertical {
  width: var(--td-step-item-circle-size, 44rpx);
  height: var(--td-step-item-circle-size, 44rpx);
}
.t-steps-item__circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--td-step-item-circle-size, 44rpx);
  height: var(--td-step-item-circle-size, 44rpx);
  text-align: center;
  border-radius: 50%;
  font-size: var(--td-step-item-circle-font-size, 28rpx);
}
.t-steps-item__icon {
  z-index: 1;
  vertical-align: top;
  font-size: var(--td-font-size-base, 28rpx);
  position: relative;
}
.t-steps-item__dot {
  width: var(--td-step-item-dot-size, 16rpx);
  height: var(--td-step-item-dot-size, 16rpx);
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
}
.t-steps-item__content {
  text-align: center;
}
.t-steps-item__content--horizontal {
  max-width: 80px;
  margin-top: 16rpx;
}
.t-steps-item__content--vertical {
  margin-left: 16rpx;
  flex: 1;
  padding-bottom: 32rpx;
}
.t-steps-item__content--vertical.t-steps-item__content--last {
  padding-bottom: 0;
}
.t-steps-item__title {
  position: relative;
  line-height: var(--td-step-item-circle-size, 44rpx);
  font-size: var(--td-font-size-base, 28rpx);
}
.t-steps-item__title--process {
  font-weight: 600;
}
.t-steps-item__title--vertical {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.t-steps-item__description {
  color: var(--td-step-item-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
  line-height: 40rpx;
  font-size: var(--td-font-size-s, 24rpx);
}
.t-steps-item__description--vertical {
  text-align: left;
}
.t-steps-item__extra:not(:empty) {
  margin-top: 16rpx;
}
.t-steps-item__line {
  background-color: var(--td-step-item-line-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  content: '';
  display: block;
  position: absolute;
}
.t-steps-item__line--horizontal {
  height: 1px;
  transform: translateY(-50%);
  width: calc(100% - 32rpx - var(--td-step-item-circle-size, 44rpx));
  top: calc(var(--td-step-item-circle-size, 44rpx) / 2 + 1px);
  left: calc(50% + var(--td-step-item-circle-size, 44rpx) / 2 + 16rpx);
}
.t-steps-item__line--horizontal.t-steps-item__line--dot {
  top: calc(var(--td-step-item-dot-size, 16rpx) / 2);
}
.t-steps-item__line--finish,
.t-steps-item__line--reverse.t-steps-item__line--process {
  background-color: var(--td-step-item-finish-line-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-steps-item__line--vertical {
  height: calc(100% - 32rpx - var(--td-step-item-circle-size, 44rpx));
  width: 1px;
  transform: translateX(-50%);
  left: calc(var(--td-step-item-circle-size, 44rpx) / 2);
  top: calc(var(--td-step-item-circle-size, 44rpx) + 16rpx);
}
.t-steps-item__line--vertical.t-steps-item__line--dot {
  top: var(--td-step-item-circle-size, 44rpx);
  height: calc(100% - var(--td-step-item-circle-size, 44rpx));
}
:host {
  flex: 1;
  vertical-align: top;
  position: relative;
  align-self: flex-start;
  width: inherit;
}