:root{--button-click-scale:.955 .925;--button-radius:.5rem;--button-ease-click:cubic-bezier(.4, 0, .2, 1);--button-ease-hover:linear(0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1);--button-ease-smooth:cubic-bezier(.32, .72, 0, 1);--button-ease-soft-overshoot:cubic-bezier(.59, 1, .88, 1.01);--button-ease-bounce:cubic-bezier(.34, 2.27, .64, 1);--button-ease-focus:cubic-bezier(.32, .72, 0, 1)}.button{height:var(--button-height);font-family:var(--font-sans);font-size:var(--button-font-size);color:var(--color-on-primary);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:scale .15s var(--button-ease-click);background:0 0;border:none;font-weight:600;line-height:1;text-decoration:none;display:inline-grid;position:relative}.button:after{content:"";border-radius:var(--button-radius);transition:box-shadow .2s var(--button-ease-focus);pointer-events:none;z-index:2;position:absolute;inset:-.125em}.button:focus-visible:after{box-shadow:0 0 0 .125em var(--color-text)}.button:active{scale:var(--button-click-scale)}.button__bg{border-radius:var(--button-radius);background:var(--color-primary);width:100%;height:100%;transition:scale .15s var(--button-ease-soft-overshoot), transform .15s var(--button-ease-soft-overshoot), background-color .2s ease;grid-area:1/1}.button__inner{z-index:1;width:100%;height:100%;padding-inline:var(--button-padding-x);grid-area:1/1;place-items:center;display:grid}.button__text{white-space:nowrap;will-change:transform;grid-area:1/1}.button__text.is--hover{opacity:0}.button.is--split .button__text.is--hover{opacity:1}.button__split-char{will-change:filter;display:inline-block}.button.is--split .button__text.is--default .button__split-char{transition:translate .82s var(--button-ease-hover), scale .82s var(--button-ease-hover), opacity .15s ease-out, filter .15s ease-out}.button.is--split .button__text.is--hover .button__split-char{opacity:0;filter:blur(.2em);transition:translate .45s var(--button-ease-smooth), scale .45s var(--button-ease-smooth), opacity .15s 50ms ease-out, filter .15s 50ms ease-out;translate:-1em;scale:.5}.button-secondary{color:var(--color-on-secondary)}.button-secondary .button__bg{background:var(--color-secondary)}.button-ghost{color:var(--color-text)}.button-ghost .button__bg{background:0 0}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.button:is(:hover,:focus-visible) .button__bg{transition:scale .15s var(--button-ease-soft-overshoot), transform .35s .15s var(--button-ease-bounce), background-color .2s ease;transform:scale(1.04712,1.08108)}.button-ghost:is(:hover,:focus-visible) .button__bg{background:var(--color-card)}.button.is--split:is(:hover,:focus-visible) .button__text.is--default .button__split-char{opacity:0;filter:blur(5px);transition:translate .45s calc((var(--char) - 1) * 18ms) var(--button-ease-smooth), scale .45s calc((var(--char) - 1) * 18ms) var(--button-ease-smooth), opacity .15s calc((var(--char) - 1) * 18ms + 50ms) ease-out, filter .15s calc((var(--char) - 1) * 18ms + 50ms) ease-out;translate:.5em;scale:.5}.button.is--split:is(:hover,:focus-visible) .button__text.is--hover .button__split-char{opacity:1;filter:blur();transition:translate .82s calc((var(--char) - 1) * 18ms + 50ms) var(--button-ease-hover), scale .82s calc((var(--char) - 1) * 18ms + 50ms) var(--button-ease-hover), opacity .15s calc((var(--char) - 1) * 18ms + 50ms) ease-out, filter .15s calc((var(--char) - 1) * 18ms + 50ms) ease-out;translate:0;scale:1}}
