.progress-bar {
  display: flex;

  .bar-box {
    display: flex;
    align-items: center;
    margin-right: 8px;
    position: relative;
    .badge-box {
      position: absolute;
      right: 95px;
      top: 7px;
    }
    .circle-span {
      width: 30px;
      height: 30px;
      background-color: $--color-c3;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      line-height: 30px;
      color: $--color-c6;
      font-size: $--font-m;
    }

    .decs-span {
      font-size: $--font-xs;
      color: $--color-c3;
      margin: 0 8px;
    }

    .line-span {
      width: 90px;
      height: 2px;
      background-color: $--color-c3;
    }

    &.across {
      .circle-span {
        background-color: $--color-c8;
        cursor: pointer;
        justify-content: center;
        align-items: center;

        &:hover {
          background-color: $--color-c9;
        }

        > img {
          margin-top: -1px;
          width: 17px;
          height: 13px;
        }
      }

      .decs-span {
        color: $--color-c8;
      }

      .line-span {
        background: $--color-c8;
      }
    }

    &.active {
      .circle-span {
        cursor: pointer;
        background-color: $--color-c8;

        &:hover {
          background-color: $--color-c9;
        }
      }

      .decs-span {
        color: $--color-c8;
      }

      .line-span {
        background: linear-gradient(90deg, $--color-c8 0%, $--color-c3 100%);
      }
    }

    &.clickStep {
      .circle-span {
        background-color: $--color-c9;
        box-shadow: 0px 1px 6px 0px rgba(55, 152, 71, 0.35);
      }

      .decs-span {
        font-weight: bold;
      }
    }
  }
}