@use '../common/var' as *;
@use '../mixins/mixins' as *;

.pagoda-flow-layout-template {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  margin: 90px 0 20px;

  &__btn-group {
    display: flex;
    flex-direction: row;
  }

  &__content {
    margin: 40px 0 0;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__steps {
    width: 80%;
    .el-step__main {
      div.el-step__title {
        color: #666;
        font-weight: 400;
        font-size: var(--el-font-size-medium);
        line-height: 31px;
      }
      div.is-process,
      div.is-success {
        color: var(--el-color-primary);
      }
    }
    .is-success {
      .el-step__icon.is-text {
        border-color: var(--el-color-primary);
        background-color: #fff;
        color: var(--el-color-primary);
      }
      .el-step__line {
        .el-step__line-inner {
          border-color: var(--el-color-primary);
        }
      }
    }
    .is-process {
      .el-step__icon.is-text {
        border-color: var(--el-color-primary);
        background-color: var(--el-color-primary);
        color: #fff;
      }
    }
  }
}