styles.module.scss

.containerBeforeActivation {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 20px;

  &Title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    line-height: 20px;
  }

  &Footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    line-height: 20px;
  }
}
$sizeProgressValue: 37px;

.containerProgressBar {
  display: flex;
  margin: 0 -15px;
  align-items: center;
  height: 120px;

  &Track {
    width: 100%;
    height: 2px;
    background: #ffffff26;
    padding: 0px 15px;
    transition: 1s ease-out;

    &Progress {
      position: relative;
      border-radius: 2px;
      width: 0%;
      height: 2px;
      background: #ffffff;
      box-shadow: 0px 0px 10px 2px rgba(54, 214, 174, 0.65);
      transition: 1s ease-out;

      &Value {
        position: absolute;
        width: $sizeProgressValue;
        height: $sizeProgressValue;
        background: #000000;
        box-shadow: 0px 0px 6px 1px #ffffff80;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 12px;
        top: calc(-37px / 2);
        right: calc(-37px / 2);

        &::after {
          content: '';
          z-index: -1;
          position: absolute;
          border-radius: 50%;
          height: calc(37px * 2);
          width: calc(37px * 2);
          background: radial-gradient(
            50% 50% at 50% 50%,
            #ffffff 0%,
            rgba(255, 255, 255, 0) 60.42%
          );
          box-shadow: 0px 0px 6px 1px rgba(255, 255, 255, 0.5);
        }
      }
    }
  }
}