/* [project]/components/system/reward-fx.css [app-client] (css) */
.rfx-layer {
  z-index: 90;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.rfx-sparks {
  position: absolute;
  inset: 0;
}

.rfx-slot {
  opacity: 0;
  visibility: hidden;
  will-change: auto;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.rfx-slot.rfx-coin {
  visibility: visible;
  will-change: transform, opacity;
}

.rfx-slot[data-kind="boosters"] {
  color: var(--color-crimson);
}

.rfx-icon {
  width: 100%;
  height: 100%;
  display: block;
}

.rfx-spark {
  background: var(--burst-c, var(--color-crimson));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: 0;
  will-change: transform, opacity;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  position: absolute;
}