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

.animated-guidehelperalt-wrapper {
  position: relative;
  max-width: 70px;
  width: 70px;
  padding: 1.2rem 1.5rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: $secondary-color;
  border-radius: 25px;
  gap: 20px;

  .animated-guidehelperalt-image-wrapper {
    cursor: pointer;
    position: absolute;
    left: -50px;
    bottom: -10px;
  }

  .animated-guidehelperalt-text-wrapper {
    margin-left: 1.5rem;
    //white-space: nowrap;
    opacity: 0;
    color: $white;
    font-size: 1.4rem;
    letter-spacing: 0.28px;
    font-weight: 200;
    line-height: 20px;

    p{
      color: inherit;
      font-size: inherit;
      letter-spacing: inherit;
      font-weight: inherit;
    }

    button {
      background-color: #1a73e8;
      color: $white;
      font-weight: bold;
      text-decoration: none;
      outline: none;
      border: none;
    }

  }

  .close-img-wrapper {
    align-self: flex-start;
    cursor: pointer;
    margin-top: -8px;

    img {
      width: 1rem;
      height: 1rem;
    }
  }
}

//open state
.expanded-wrapper {
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  width: fit-content;
  min-width: 200px;
  max-width: 520px;
  justify-content: space-between;
  padding-right: 2rem;

  .animated-guidehelperalt-text-wrapper {
    opacity: 1;

    .fade-in {
      animation: fade-in 0.5s ease;
    }
  }
}

.expanded-image-wrapper {
  bottom: 1.2rem !important;
  cursor: default !important;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}