.animated.add_star {
  use.d-none.use-add-star {
    display: block;
  }

  #add_star_outer_container {
    scale: var(--scale, 1);
    translate: var(--translate, 0 0);
  }

  #add_star_main_container {
    opacity: 0;
    animation-name: add_star_main_container_animation;
    animation-timing-function: linear;
    animation-delay: var(--animation-delay, 0s);
    animation-duration: var(--animation-duration, 3s);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
  }

  &.stars-1 {
    #add_star_container {
      translate: 2500px;
    }
    .star-1th {
      display: block;
    }
  }

  &.stars-2 {
    #add_star_container {
      translate: 2000px;
    }
    .star-1th,
    .star-2nd {
      display: block;
    }
  }

  &.stars-3 {
    #add_star_container {
      translate: 1400px;
    }
    .star-1th,
    .star-2nd,
    .star-3rd {
      display: block;
    }
  }

  &.stars-4 {
    #add_star_container {
      translate: 800px;
    }
    .star-1th,
    .star-2nd,
    .star-3rd,
    .star-4th {
      display: block;
    }
  }

  &.stars-5 {
    #add_star_container {
      translate: 0px;
    }
    .star-1th,
    .star-2nd,
    .star-3rd,
    .star-4th,
    .star-5th {
      display: block;
    }
  }
}

@keyframes add_star_main_container_animation {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
