.specular-button {
  --specular-pad: 20px;
  --specular-radius: 14px;
  position: relative;
  overflow: visible;
  isolation: isolate;
  transform: none !important;
}

.specular-button:hover,
.specular-button:active {
  transform: none !important;
}

.specular-button__fx {
  position: absolute;
  inset: calc(var(--specular-pad) * -1);
  z-index: 1;
  pointer-events: none;
  contain: layout paint;
}

.specular-button__fx canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.specular-button__content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .specular-button__fx {
    display: none;
  }
}