.specular-button {
  position: relative;
  isolation: isolate;
  overflow: visible;
  outline: none;
}

.specular-button__fx {
  position: absolute;
  z-index: 2;
  inset: -20px;
  overflow: visible;
  pointer-events: none;
}

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

.specular-button:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 58%, transparent);
  outline-offset: 3px;
}

.specular-button:disabled .specular-button__fx {
  opacity: 0;
}

.specular-button--fallback,
.specular-button--reduced {
  border-color: color-mix(in srgb, currentColor 34%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 22px rgba(23, 19, 20, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .specular-button,
  .specular-button:active {
    transition: none;
  }
}