@import "../../../assets/scss/variables";

.guidehelperalt-wrapper {
  margin-bottom: 5px;
  position: relative;
  width: 100%;
  padding-left: 20px;

  .guidehelperalt-image-wrapper {
    position: absolute;
    left: -22px;

    &.animated {
      img {
        animation-name: hello;
        animation-duration: 2s;
        animation-iteration-count: infinite;
      }
    }

    p {
      display: none;
    }

    &.cc {
      img {
        animation: 0.5s ease-out forwards comeout;
      }

      p {
        opacity: 0;
        display: block;
        animation: 0.5s ease-in 0.5s forwards comein;
      }
    }
  }

  .guidehelperalt-text-wrapper {
    border-radius: 15px;
    background-color: $secondary-color;
    display: flex;
    align-items: center;
    padding: 1.5rem 2rem 1.5rem 4rem;


    p {
      color: $white;
      font-size: 1.4rem;
      letter-spacing: 0.28px;
      font-weight: 200;
      line-height: 20px;
    }

  }
}

@keyframes hello {
  0% {
    transform: rotate(0);
  }

  33% {
    transform: rotate(-10deg);
  }

  66% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes comeout {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(90deg);
    display: none;
  }
}

@keyframes comein {
  0% {
    display: block !important;
    opacity: 1;
    transform: rotateY(90deg);
  }

  100% {
    opacity: 1;
    transform: rotateY(0);
  }
}