.stickers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
  z-index: 999;
}

.sticker {
  position: absolute;
  width: 200px;
  pointer-events: none;
}

.sticker:active {
  cursor: grabbing;
  pointer-events: auto;
}

.stickerPath {
  pointer-events: auto;
  cursor: grab;
}

.stickerPath:hover,
.sticker:active .stickerPath {
  stroke: var(--amber-9);
  stroke-width: 6px;
}

.stickerPicture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  user-select: none;
}

.stickerSvg {
  pointer-events: fill;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  user-select: none;
  filter: drop-shadow(0 1px 1px var(--black-a5));
}

.shoo-wrapper {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 999;
  padding: var(--space-xl);
}

@keyframes shoo {
  0% {
    transform: rotate(0deg);
  }
  15%,
  30% {
    transform: rotate(-8deg);
  }
  45% {
    transform: rotate(9deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(12deg);
  }
  90% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(9deg);
  }
}

[data-sam-shoo] {
  background-color: var(--gray-12);
  border: none;
  color: var(--gray-1);
  border-radius: var(--radius-full);
  padding: var(--space-2xs) var(--space-m);
  font-weight: var(--font-weight-medium);
  transition:
    rotate 0.2s ease,
    scale 0.2s ease;
  transform-origin: 50% 150%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: var(--shadow-m);
}

[data-sam-shoo]:hover {
  scale: 1.15;
  rotate: -4deg;
}

[data-sam-shoo]:active {
  rotate: 10deg;
  scale: 1.1;
}

[data-sam-shoo].exiting {
  animation: shoo 0.5s ease-in both;
}
