atomics-donate {
      width: fit-content;
}

atomics-donate button {
  background: none;
}

atomics-donate :root {
  --ru: 15;
}

atomics-donate *,
atomics-donate *::before,
atomics-donate *::after {
  transform-style: preserve-3d;
}

atomics-donate [data-tipping='false'] .coin__face--front::before {
  animation: glimmer 6s infinite;
}

atomics-donate [aria-label] {
  --bg: transparent;
  --depth: 2;
  --face: hsl(51.7deg 100% 50.39%);
  --side: hsl(42.79deg 100% 47.84%);
  --detail: hsl(43 97% 46%);
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: #0000;
  background: var(--bg);
  border-radius: 6px;
  font-size: 0.875rem;
  color: #fff;
  font-family: inherit;
  /* border: 1px solid color-mix(in oklch, var(--bg), #000 12%); */
  cursor: pointer;
  transform-origin: 75% 50%;
  transition: transform 0.26s, box-shadow 0.26s, background 0.26s;
  padding: 0;
  --shadow-color: 0 0% 0%;
  /* box-shadow: 0px 0.6px 0.7px hsl(var(--shadow-color) / 0.14), 0px 2.3px 2.6px -0.8px hsl(var(--shadow-color) / 0.14),
    0px 5.9px 6.6px -1.7px hsl(var(--shadow-color) / 0.14), 0px 14.5px 16.3px -2.5px hsl(var(--shadow-color) / 0.14); */
}


body[theme='dark']:has(atomics-donate) atomics-donate [aria-label] {
      --face: hsl(51.7deg 100% 30.39%);
    --side: hsl(42.79deg 100% 17.84%);
    --detail: hsl(43 97% 16%);
}

atomics-donate [aria-label] .content {
  align-items: center;
  clip-path: inset(-100vmax 0 1px 0);
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  height: 100%;
}

atomics-donate [aria-label][data-tipping='false']:active {
  transform: rotate(calc(var(--ru) * -1deg));
  /* box-shadow: -0.5px 0.7px 1px hsl(var(--shadow-color) / 0.14),
    -1.8px 2.3px 3.3px -0.8px hsl(var(--shadow-color) / 0.14), -4.6px 6px 8.5px -1.7px hsl(var(--shadow-color) / 0.14),
    -11.4px 14.6px 20.8px -2.5px hsl(var(--shadow-color) / 0.14); */
}

atomics-donate [aria-label]:is(:focus-visible, :hover) {
  --bg: color-mix(in oklch, transparent, #000 5%);
}

atomics-donate [aria-label]:is(:focus-visible, :hover) .purse {
  rotate: y 360deg;
  transition: rotate 0.26s 0.12s ease-out;
}

atomics-donate [aria-label]:is(:focus-visible, :hover) .coin__face--front::before {
  opacity: 0;
}

atomics-donate [aria-label] .purse {
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

atomics-donate [aria-label] .scene {
  --thickness: 4;
  display: inline-block;
  width: 1.2lh;
  aspect-ratio: 1;
  position: relative;
  transform-style: preserve-3d;
  perspective: 100vh;
}

atomics-donate [aria-label] .scene .hole {
  position: absolute;
  z-index: 10;
  inset: 0;
  scale: 0;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, calc(var(--thickness) * -2px));
  transform-origin: 50% 70%;
}

atomics-donate [aria-label] .scene .hole::before {
  content: '';
  position: absolute;
  width: 125%;
  height: 40%;
  border-radius: 50%;
  top: 70%;
  left: 50%;
  translate: -50% -50%;
  background: black;
  box-shadow: 0 2px hsl(0 0% 20%) inset;
}

atomics-donate [aria-label] .scene .hole::after {
  transform-style: preserve-3d;
  content: '';
  background: var(--bg);
  height: 200%;
  top: 0;
  left: 50%;
  translate: -50% 25%;
  width: 121%;
  position: absolute;
  transform: translate3d(0, 0, calc(var(--thickness) * 5px));
  mask: radial-gradient(125% 32% at 50% 3%, rgba(0, 0, 0, 0) 50%, #fff 50%);
}

atomics-donate .coin {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

atomics-donate .coin .coin__core {
  height: 100%;
  width: calc(var(--depth) * 2px);
  background: var(--side);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform: rotateY(90deg) rotateX(calc((90 - var(--rx, 0)) * -1deg));
  transform-style: preserve-3d;
}

atomics-donate .coin .coin__core.coin__core--rotated {
  --base: 90;
  transform: rotateY(90deg) rotateX(calc((90 - var(--rx, 0)) * 1deg));
}

atomics-donate .coin .coin__core::after,
atomics-donate .coin .coin__core::before {
  content: '';
  height: 100%;
  width: calc(var(--depth) * 2px);
  background: var(--side);
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

atomics-donate .coin .coin__core::after {
  transform: rotateX(calc((var(--base, 0) - var(--rx, 0)) * 1deg));
}

atomics-donate .coin .coin__core::before {
  transform: rotateX(calc((var(--base, 0) - var(--rx, 0)) * -1deg));
}

atomics-donate .coin .coin__face {
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-style: preserve-3d;
  background: var(--face);
  display: grid;
  place-items: center;
  color: var(--detail);
}

atomics-donate .coin .coin__face svg {
  width: 45%;
  scale: -1 1;
  translate: -2% 0;
}

atomics-donate .coin .coin__face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--side);
  backface-visibility: hidden;
}

atomics-donate .coin .coin__face.coin__face--front {
  transform: translate3d(0, 0, calc((var(--depth) * 1px) + 0.5px)) rotateY(180deg);
}

atomics-donate .coin .coin__face.coin__face--front::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 20;
  transition: opacity 0.26s;
  background: linear-gradient(
      70deg,
      #0000 0 calc(50% - 2px),
      hsl(0 0% 100% / 0.5) calc(50% - 2px) calc(50% + 2px),
      #0000 calc(50% + 2px) 100%
    )
    100% 50% / 300% 100% no-repeat;
}

atomics-donate .coin .coin__face.coin__face--rear {
  transform: translate3d(0, 0, calc((var(--depth) * -1px) - 0.5px));
}

@keyframes glimmer {
  30%,
  100% {
    background-position: 0% 50%;
  }
}