@import "../../../styles/vars.scss";

.honjo-steps {
  .el-step .el-step__line {
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
  }

  .el-step__icon {
    width: 32px;
    height: 32px;
    &.is-text{
      .el-step__icon-inner {
        font-size: 20px;
        font-weight: 400;
      }
    }
    .el-step__icon-inner {
      font-size: 32px;
    }
  }
  .el-step__line {
    top: 16px !important;
  }
}


.honjo-step:not(.honjo-step--wait) {
  .el-step__title {
    color: $text-heading-color !important;
    font-weight: 600 !important;
  }

  .el-step__description {
    color: $text-secondary-color !important;
  }
}

.honjo-step.honjo-step--finish {
  .el-step__head {
    color: $color-primary;
    border-color: $color-primary;
  }
}

.honjo-step.honjo-step--process {
  .el-step__head {
    color: #85BB39;
    border-color: #85BB39;
  }
}

.honjo-step.honjo-step--error {
  .el-step__head {
    color: $color-danger;
    border-color: $color-danger;
  }
}

.honjo-step.honjo-step--reject {
  .el-step__head {
    color: $color-warning;
    border-color: $color-warning;
  }
}

.honjo-step .honjo-step--wait {

}

.honjo-step__success {
  border-radius: 100px;
  padding: 3px;
  background-color: #85BB39;
  color: #fff;
  font-size: 24px !important;
  // &::after {
  //   content: "…";
  //   position: absolute;
  //   left: 50%;
  //   top: 50%;
  //   transform: translate(-50%, -50%);
  //   font-size: 20px;
  //   color: #fff;
  // }
  // position: relative;
  // display: block;
  // height: 100%;
  // width: 100%;
  // border-radius: 100px;
  // background-color: #85BB39;
}

.honjo-steps--process {

  .el-step__head.is-finish, .el-step__head.is-process {
    .el-step__icon.is-text {
      background-color: $color-primary;
      border-color: $color-primary;
      color: #fff;
    }
  }

  .el-step__head.is-finish {
    .el-step__line {
      background-color: $color-primary;
      .el-step__line-inner {
        border-color: $color-primary;
      }
    }
  } 
  .el-step__head.is-process {
    .el-step__line {
      background: linear-gradient(270deg,rgba(248,255,252,1) 6%,$color-primary 100%);
      // .el-step__line-inner {
      //   border-color: $color-primary;
      // }
    }
  } 

  .el-step__head.is-wait {
    .el-step__icon.is-text {
      background-color: #C5C5C5;
      border-color: #C5C5C5;
      color: #fff;
    }
  }

  .el-step {
    .el-step__main {
      .el-step__title {
        font-weight: 500 !important;
      }
    }
  }
}