@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.GuideStepsWrapper {
  counter-reset: section;
  .StepItemWrap {
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      color: $whiteColor;
      counter-increment: section;
      content: counter(section) " ";
      font-weight: $fw600;
    }
    &::after {
      content: "";
      position: absolute;
      z-index: 0;
      right: -1px;
      bottom: 0;
      width: 110px;
      height: 75px;
      display: block;
      mask-size: contain;
      -webkit-mask-size: contain;
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      transition: all 0.3s ease-in-out;
      mask-position: center;
      background-color: $secondaryColor;
      mask-image: url("../../../../../public/images/step-card-shape.svg");
      -webkit-mask-image: url("../../../../../public/images/step-card-shape.svg");
    }
    .StepItemContent {
      --r: 25px; /* the radius */
      --s: 44px; /* size of inner curve */
      --x: -5px; /* horizontal offset (no percentage) */
      --y: -5px; /* vertical offset (no percentage) */
      background: $whiteColor;
      border-radius: var(--r);
      --_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000
            72%);
      --_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);
      --_d: (var(--s) + var(--r));
      mask: calc(var(--_d) + var(--x)) 0 var(--_m),
        0 calc(var(--_d) + var(--y)) var(--_m),
        radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px))
          calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
        var(--_g) calc(var(--_d) + var(--x)) 0,
        var(--_g) 0 calc(var(--_d) + var(--y));
      mask-repeat: no-repeat;
      @media (min-width: $md) {
        --r: 36px;
        --s: 44px; 
        --x: -4px;
        --y: -5px;
      }
      .ProgressLine{
        color: $black;
        .FirstLine{
          width: 100%;
          flex-shrink: 0;
          display: block;
          margin-left: -100%;
          background-image: url("../../../../../public/images/primary-line-anim.svg");
          background-position: center;
          background-repeat: repeat;
          background-size: cover;
          &.animate {
            animation-name: colorChange;
            animation-duration: 1s;
            animation-timing-function: ease-out;
            animation-fill-mode: forwards;
          }
        
          &.delay-1.animate {
            animation-delay: 1s;
          }
        
          &.delay-2.animate {
            animation-delay: 2.5s;
          }
        
          &.delay-3.animate {
            animation-delay: 3.5s;
          }
        }
        .LastLine{
          flex-shrink: 0;
          display: block;
          width: 100%;
          background-image: url("../../../../../public/images/black-line-anim.svg");
          background-position: center;
          background-repeat: repeat;
          background-size: cover;
        }
      }
    }
    &:last-child{
      .AnimatedArrow{
        &::after{
          display: none;
        }
      }
    }
    .AnimatedArrow {
      left: calc(100% - 82px);
      width: 0;
      opacity: 0;
      transition: none;
      @media (min-width: $xl) {
        &::after{
          content: "";
          position: absolute;
          height: 1px;
          width: calc(100% - 36px);
          left: 100%;
          background-color: $primaryColor;
          @media (min-width: $lg) {
            width: calc(100% - 44px);
          }
          @media (min-width: $xxl) {
            width: calc(100% - 36px);
          }
        }
      }
    
      &.animate {
        animation-name: revealArrow;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
      }
    
      &.delay-1.animate {
        animation-delay: 1s;
      }
    
      &.delay-2.animate {
        animation-delay: 2.5s;
      }
    
      &.delay-3.animate {
        animation-delay: 3.5s;
      }
    }
    
    @keyframes revealArrow {
      0% {
        width: 0;
        opacity: 0;
        background-color: transparent;
      }
      100% {
        width: 80px;
        opacity: 1;
        background-color: $primaryColor;
      }
    }
    @keyframes colorChange {
      0% {
        margin-left: -100%;
      }
      100% {
        margin-left: 0px;
      }
    }
  }
}