.ReactionAnimatedEmoji {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  &.is-animating {
    // Fix for redundant scroll on iOS
    transform: translateZ(0);
    // Fix for redundant scroll in Firefox
    contain: layout;
  }

  .AnimatedSticker {
    position: fixed;
    top: -0.375rem;
    left: -0.375rem;
    pointer-events: none;

    &.effect {
      top: -2.5rem;
      left: -2.5rem;
    }

    &:not(.open) {
      opacity: 1 !important;
    }

    &.closing {
      opacity: 0 !important;
    }
  }

  &.in-meta {
    .AnimatedSticker {
      top: -0.4375rem;
      left: -0.4375rem;

      &.effect {
        top: -2.5625rem;
        left: -2.5625rem;
      }

      // Fix for weird positioning in Chrome
      canvas {
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}