@import '../index.less';
@btri-steps: ~'@{ant-prefix}-btri-steps';
@btri-step: ~'@{ant-prefix}-btri-step';

.@{btri-steps} {
  &-box.@{ant-prefix}-steps {
    .@{ant-prefix}-steps-item-active {
      .@{ant-prefix}-steps-item-icon {
        color: var(--white);
      }
    }
    .@{ant-prefix}-steps-item-finish {
      .@{ant-prefix}-steps-item-icon {
        color: var(--primary-6);
      }
    }
    .@{ant-prefix}-steps-item-wait {
      .@{ant-prefix}-steps-item-icon {
        color: var(--gray-7);
      }
    }
    &.@{ant-prefix}-steps-vertical {
      .@{ant-prefix}-steps-item {
        min-height: 80px;
      }
    }
    &.@{ant-prefix}-steps-small {
      .@{ant-prefix}-steps-item {
        .@{ant-prefix}-steps-item-content
          .@{ant-prefix}-steps-item-description {
          margin-top: 4px;
          font-size: 12px;
          line-height: 20px;
        }
      }
    }
    &.@{ant-prefix}-steps-dot:not(.@{ant-prefix}-steps-vertical) {
      .@{ant-prefix}-steps-item-active {
        .@{ant-prefix}-steps-icon-dot {
          top: -1px;
        }
        .@{ant-prefix}-steps-item-content {
          margin-top: 4px;
        }
      }
      .@{ant-prefix}-steps-item-tail::after {
        height: 1px;
      }
    }
    &.@{ant-prefix}-steps-dot.@{ant-prefix}-steps-vertical {
      .@{ant-prefix}-steps-item-active .@{ant-prefix}-steps-item-container {
        .@{ant-prefix}-steps-icon-dot {
          top: -3px;
          left: -2px;
        }
        .@{ant-prefix}-steps-item-content {
          margin-top: 0px;
          position: absolute;
          left: 20px;
        }
      }
      .@{ant-prefix}-steps-item-tail::after {
      }
    }
    .@{ant-prefix}-steps-item {
      .@{ant-prefix}-steps-item-icon {
        margin-right: 12px;
        .@{ant-prefix}-steps-icon {
          font-size: 16px;
          line-height: 22px;
        }
      }
      .@{ant-prefix}-steps-item-content {
        .@{ant-prefix}-steps-item-description {
          color: var(--body-font);
          margin-top: 8px;
        }
      }
      &.@{ant-prefix}-steps-item-wait {
        .@{ant-prefix}-steps-item-content {
          .@{ant-prefix}-steps-item-description {
            color: var(--caption-font);
          }
        }
      }
    }
    .@{ant-prefix}-steps-item-finish {
      .@{ant-prefix}-steps-item-icon {
        background-color: var(--primary-1);
        border-color: var(--primary-1);
      }
      .@{ant-prefix}-steps-item-content .@{ant-prefix}-steps-item-title {
        color: var(--gray-13);
      }
    }
    .@{ant-prefix}-steps-item-wait {
      .@{ant-prefix}-steps-item-icon {
        background-color: var(--gray-2);
        border-color: var(--gray-2);
        .@{ant-prefix}-steps-icon {
          color: var(--body-font);
        }
      }
    }
    .@{ant-prefix}-steps-item-error.@{ant-prefix}-steps-item {
      .@{ant-prefix}-steps-item-icon {
        background-color: var(--red-6);
        border-color: var(--red-6);
        .@{ant-prefix}-steps-icon {
          color: var(--white);
          .@{ant-prefix}-steps-icon-dot {
            width: 12px;
            height: 12px;
            border-radius: 6px;
            background-color: var(--red-6);
            top: -3px;
          }
        }
      }
      .@{ant-prefix}-steps-item-container .@{ant-prefix}-steps-item-content {
        margin-top: 0px;
        .@{ant-prefix}-steps-item-title {
          color: var(--gray-13);
        }
      }
    }
  }
}

.@{btri-steps}-arrow-container {
  display: flex;
  justify-content: space-around;
  margin-left: 2%;
  .@{ant-prefix}-btri-step-item
    .@{ant-prefix}-btri-step-item-container
    .@{ant-prefix}-btri-step-item-title {
    font-weight: 400;
  }
}