.jammy-button-effect {
    --jammy-hover-color: #12a8e5;
    --jammy-hover-ink: #ffffff;
    --jammy-hover-x: 50%;
    --jammy-hover-y: 50%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.jammy-button-effect::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: var(--jammy-hover-x);
    top: var(--jammy-hover-y);
    width: 215%;
    aspect-ratio: 1;
    pointer-events: none;
    background: var(--jammy-hover-color);
    border-radius: 50%;
    opacity: .9;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .72s cubic-bezier(.22, .72, .2, 1), opacity .38s ease;
}

.jammy-button-effect:hover {
    color: var(--jammy-hover-ink) !important;
    border-color: var(--jammy-hover-color) !important;
    transition-duration: .32s;
}

.jammy-button-effect:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.jammy-button-effect > * {
    position: relative;
    z-index: 1;
}

.jammy-button-effect.is-loading::before,
.is-submitting .jammy-button-effect::before,
.jammy-button-effect[aria-disabled="true"]::before,
.jammy-button-effect:disabled::before {
    transform: translate(-50%, -50%) scale(0) !important;
}

.jammy-button-effect.is-loading,
.is-submitting .jammy-button-effect,
.jammy-button-effect[aria-disabled="true"],
.jammy-button-effect:disabled {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .jammy-button-effect::before { transition: none; }
}