.uik-celebrate {
  position: fixed;
  pointer-events: none;
  width: 100%;
  height: 100vh;
  z-index: 99999;
  top: 0;
  left: 0;
  transition: all 0.5s;

  .uik-celebrate__particle {
    position: absolute;
  }

  &--money {
    .uik-celebrate__particle {
      color: #47cc5f;
    }
  }

  @for $i from 0 through 150 {
    $w: random(20);
    $l: random(100);
    
    .uik-celebrate__particle--#{$i} {
      top: -10%;
      left: unquote($l + "%");
      opacity: random() + 0.5;
      transform: rotate(#{random() * 360}deg);
      animation: uik-celebrate-#{$i} unquote(4 + random() + "s") unquote(random() + "s") infinite;

      @keyframes uik-celebrate-#{$i} {
        100% {
          top: 150%;
          left: unquote($l + random(15) + "%");
        }
      }
    }
    
    &--confetti {
      $colors: (var(--primary), var(--secondary), var(--blue), var(--green), var(--orange));

      .uik-celebrate__particle--#{$i} {
        width: #{$w}px;
        height: #{$w * 0.4}px;
        background-color: nth($colors, random(5));
      }
    }

    &--money {
      .uik-celebrate__particle--#{$i} {
        width: #{$w * 2}px;
      }
    }
  } 

  &--destroy {
    opacity: 0;
  }
}