@popupPrefix: c7ncd-cluster-final-connect;
@success: #1fc2bb;
@failed: #f77a70;
@operating: #6887e8;
@wait: #a6a6c0;

.@{popupPrefix}-test {
  padding: 0.16rem;
  box-shadow: 0 2px 10px 0 rgba(109, 121, 184, 0.16);
  border-radius: 4px;
  border: 1px solid #cacae4;
  margin: 32px auto 0;
  display: flex;
  align-items: center;
  width: 600px;
  &-finalMes {
    line-height: 33px;
    color: #f77a70;
  }

  &-wait {
    border: 1px solid #cacae4;
  }
  &-success {
    border: 1px solid #1fc2bb;
  }
  &-failed {
    border: 1px solid #f48590;
  }
  &-operating {
    position: relative;
    width: 600px;
    height: 66px;
    border: none;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border: 2px solid #6887e8;
      border-image: linear-gradient(
          to right,
          rgba(104, 135, 232, 0.2),
          rgba(104, 135, 232, 1)
        )
        30 30;
      animation: borderAround 1.5s infinite linear;
    }

    @keyframes borderAround {
      0%,
      100% {
        clip: rect(0 600px 4px 0);
      }
      25% {
        clip: rect(0 600px 66px 594px);
      }
      50% {
        clip: rect(60px 600px 66px 0);
      }
      75% {
        clip: rect(0 4px 66px 0);
      }
    }
  }

  &-btn {
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC, sans-serif;
    font-weight: 500;
    color: #5365ea;
    line-height: 0.15rem;
    background: rgba(83, 101, 234, 0.08);
    border-radius: 6px;
    padding: 0.08rem 0.12rem;
    cursor: pointer;
    flex-shrink: 0;
  }

  &-text {
    font-size: 0.15rem;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: @wait;
    line-height: 0.28rem;
    margin-left: 1.17rem;

    &-success {
      color: @success;
    }
    &-failed {
      color: @failed;
    }
    &-operating {
      color: @operating;
    }
    &-wait {
      color: @wait;
    }

    &-icon {
      margin-right: 0.06rem;
      font-size: 0.24rem;
      vertical-align: sub;
    }
  }

  .c7n-steps-label-vertical .c7n-steps-item-content {
    width: 1rem;
    margin-top: 0.06rem;

    .c7n-steps-item-title {
      font-size: 0.13rem;
      font-family: PingFangSC-Medium, PingFang SC, sans-serif;
      font-weight: 500;
      line-height: 0.18rem;
    }
  }

  .c7n-steps-dot {
    .c7n-steps-item:first-child .c7n-steps-icon-dot {
      left: 0;
    }
    .c7n-steps-item-tail {
      margin: 0 0 0 0.47rem;
    }

    .c7n-steps-item-icon {
      margin-left: 0.45rem;
      width: 0.08rem !important;
      height: 0.08rem !important;
      line-height: 0.08rem !important;

      .c7n-steps-icon-dot {
        width: 0.08rem !important;
        height: 0.08rem !important;
        top: 1px;
      }
    }
  }

  .c7n-steps-item-tail::after {
    background: rgba(14, 29, 128, 0.1) !important;
  }

  .c7n-steps-item-wait {
    .c7n-steps-item-title {
      color: #cacae4;
    }
    .c7n-steps-icon-dot {
      background: #cacae4 !important;
    }
  }
  .c7n-steps-item-process {
    .c7n-steps-item-title {
      color: #4d90fe;
    }
    .c7n-steps-icon-dot {
      background: #4d90fe !important;
    }
  }
  .c7n-steps-item-finish {
    .c7n-steps-item-title {
      color: #1fc2bb;
    }
    .c7n-steps-icon-dot {
      background: #1fc2bb !important;
    }
  }
  .c7n-steps-item-error {
    .c7n-steps-item-title {
      color: #f48590;
    }
    .c7n-steps-icon-dot {
      background: #f48590 !important;
    }
  }

  &-failed-icon {
    font-size: 0.12rem;
    margin-left: 0.02rem;
    vertical-align: inherit;
  }
}