.ty-steps {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--ty-steps-color);
  display: flex;
  width: 100%;
}
.ty-steps_horizontal .ty-steps-item_label-horizontal {
  display: flex;
}
.ty-steps_horizontal .ty-steps-item_label-horizontal .ty-steps-item__tail {
  display: none;
}
.ty-steps_horizontal .ty-steps-item_label-horizontal .ty-steps-item__content {
  flex: 1;
  margin: 16px 0 0 12px;
}
.ty-steps_horizontal .ty-steps-item_label-horizontal .ty-steps-item__title {
  display: flex;
  align-items: center;
}
.ty-steps_horizontal .ty-steps-item_label-horizontal .ty-steps-item__title::after {
  content: "";
  margin: 0 12px;
  flex: 1;
  width: 100%;
  height: 1px;
  background: var(--ty-steps-tail-color);
}
.ty-steps_vertical {
  flex-direction: column;
}
.ty-steps_vertical .ty-steps-item {
  display: flex;
}
.ty-steps_vertical .ty-steps-item__head {
  flex-direction: column;
}
.ty-steps_vertical .ty-steps-item__tail {
  min-height: 30px;
  height: 100%;
  width: 1px;
  margin: 8px 0;
}
.ty-steps_vertical .ty-steps-item__content {
  margin-top: 0;
  margin-left: 12px;
}

.ty-steps-item {
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;
  vertical-align: top;
}
.ty-steps-item[role=button]:not(.ty-steps-item_disabled) {
  cursor: pointer;
}
.ty-steps-item_disabled {
  cursor: not-allowed;
}
.ty-steps-item__head {
  display: flex;
  align-items: center;
}
.ty-steps-item__icon {
  width: var(--ty-steps-icon-size);
  height: var(--ty-steps-icon-size);
  border: 1px solid var(--ty-steps-icon-border);
  border-radius: 50%;
  background-color: var(--ty-steps-icon-bg);
  display: flex;
  justify-content: center;
  align-items: center;
}
.ty-steps-item__icon_has-icon {
  border: none;
  background-color: transparent;
}
.ty-steps-item__tail {
  margin: 0 12px;
  flex: 1;
  height: 1px;
  width: 100%;
  background-color: var(--ty-steps-tail-color);
}
.ty-steps-item__content {
  margin-top: 8px;
}
.ty-steps-item__title {
  line-height: var(--ty-steps-icon-size);
  font-size: var(--ty-steps-title-font-size);
  color: var(--ty-steps-title-color);
}
.ty-steps-item__desc {
  color: var(--ty-steps-desc-color);
}
.ty-steps-item:last-child {
  flex: none;
}
.ty-steps-item:last-child .ty-steps-item__tail {
  display: none;
}
.ty-steps-item:last-child .ty-steps-item__title::after {
  content: none;
}
.ty-steps-item_process .ty-steps-item__icon {
  background-color: var(--ty-steps-process-color);
  color: var(--ty-steps-process-color-contrast);
}
.ty-steps-item_process .ty-steps-item__icon_has-icon {
  background-color: transparent;
  color: var(--ty-steps-process-color);
}
.ty-steps-item_process .ty-steps-item__title {
  font-weight: var(--ty-steps-title-font-weight-process);
  color: var(--ty-steps-process-color);
}
.ty-steps-item_process .ty-steps-item__desc {
  color: var(--ty-steps-process-color);
}
.ty-steps-item_finish .ty-steps-item__icon {
  color: var(--ty-steps-process-color);
}
.ty-steps-item_finish .ty-steps-item__tail, .ty-steps-item_finish .ty-steps-item__title::after {
  background-color: var(--ty-steps-process-color);
}
.ty-steps-item_wait .ty-steps-item__icon {
  border-color: var(--ty-steps-wait-color);
  color: var(--ty-steps-wait-color);
}
.ty-steps-item_wait .ty-steps-item__title {
  color: var(--ty-steps-wait-color);
}
.ty-steps-item_wait .ty-steps-item__desc {
  color: var(--ty-steps-wait-color);
}
.ty-steps-item_error .ty-steps-item__icon {
  border-color: var(--ty-steps-error-color);
  color: var(--ty-steps-error-color);
}
.ty-steps-item_error .ty-steps-item__title {
  color: var(--ty-steps-error-color);
}
.ty-steps-item_error .ty-steps-item__desc {
  color: var(--ty-steps-error-color);
}