.magnetic-cta{isolation:isolate;cursor:pointer;border-radius:var(--radius-corner-sm);will-change:transform;width:160px;height:44px;display:inline-grid;position:relative}.magnetic-cta:focus-visible{outline:2px solid var(--color-neutral-100);outline-offset:2px}.magnetic-cta__base,.magnetic-cta__reveal{border-radius:inherit;white-space:nowrap;box-sizing:border-box;grid-area:1/1;align-items:center;gap:8px;width:100%;height:100%;padding:10px 16px;font-size:17px;font-weight:500;line-height:24px;display:flex}.magnetic-cta__base{background:var(--color-neutral-100);color:var(--color-secondary-1100)}.magnetic-cta__reveal{background:var(--color-secondary-1100);color:var(--color-neutral-100);pointer-events:none;clip-path:circle(4px at 20px);transition:clip-path .55s var(--ease-osmo)}.magnetic-cta[data-variant=dark] .magnetic-cta__base{background:var(--color-secondary-1100);color:var(--color-neutral-100)}.magnetic-cta[data-variant=dark] .magnetic-cta__reveal{background:var(--color-neutral-100);color:var(--color-secondary-1100)}.magnetic-cta__dot-spacer{flex-shrink:0;width:8px;height:8px}.magnetic-cta[data-full-width=true]{width:100%}.magnetic-cta[data-full-width=true] .magnetic-cta__base,.magnetic-cta[data-full-width=true] .magnetic-cta__reveal{justify-content:center}@media (hover:hover) and (pointer:fine){.magnetic-cta:is(:hover,:focus-visible) .magnetic-cta__reveal{clip-path:circle(200px at 20px)}.magnetic-cta[data-full-width=true]:is(:hover,:focus-visible) .magnetic-cta__reveal{clip-path:circle(2000px at 20px)}}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){.magnetic-cta__reveal{transition:none}}