.btn{--mx:0px;--my:0px;border-radius:var(--r-pill);min-height:56px;font-family:var(--font-body);letter-spacing:-.005em;white-space:nowrap;isolation:isolate;cursor:pointer;translate:var(--mx) var(--my);transition:color .35s, translate .45s var(--ease-spring);-webkit-tap-highlight-color:transparent;font-size:14px;font-weight:600;display:inline-flex;position:relative}html[lang=ar] .btn{letter-spacing:0;font-size:15px}.btn-face{border-radius:inherit;background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-ring,none);align-items:center;gap:12px;padding:9px 9px 9px 22px;transition:background .35s,color .35s;display:inline-flex;position:relative;overflow:hidden}html[dir=rtl] .btn-face{padding:9px 22px 9px 9px}.btn-fill{background:var(--btn-fill);clip-path:circle(0% at 100%);transition:clip-path .7s var(--ease-strong);position:absolute;inset:0}html[dir=rtl] .btn-fill{clip-path:circle(0% at 0%)}.btn:hover .btn-fill,.btn:focus-visible .btn-fill{clip-path:circle(150% at 100%)}html[dir=rtl] .btn:hover .btn-fill,html[dir=rtl] .btn:focus-visible .btn-fill{clip-path:circle(150% at 0%)}.btn-lbl{z-index:1;line-height:1.15;display:inline-flex;position:relative}.btn-roll{height:1.15em;display:grid;overflow:hidden}.btn-l1,.btn-l2{transition:translate .5s var(--ease-strong), color .35s;grid-area:1/1;display:block}.btn-l2{translate:0 100%}.btn:hover .btn-l1,.btn:hover .btn-l2,.btn:focus-visible .btn-l1,.btn:focus-visible .btn-l2{translate:0 -100%}.btn:hover .btn-l2,.btn:focus-visible .btn-l2{translate:0}.btn:hover .btn-lbl,.btn:focus-visible .btn-lbl{color:var(--btn-fg-h)}.btn-arr{z-index:1;background:var(--btn-chip);width:38px;height:38px;color:var(--btn-chip-fg);border-radius:50%;flex:none;place-items:center;transition:background .4s,color .4s;display:grid;position:relative;overflow:visible}.btn-arr>span{width:100%;height:100%;transition:transform .55s var(--ease-strong);border-radius:50%;grid-area:1/1;place-items:center;display:grid;overflow:hidden}.btn-arr svg{width:15px;height:15px}.btn-a2{transform:translate(-160%,160%)}html[dir=rtl] .btn-a2{transform:translate(160%,160%)}.btn:hover .btn-a1,.btn:focus-visible .btn-a1{transform:translate(160%,-160%)}html[dir=rtl] .btn:hover .btn-a1,html[dir=rtl] .btn:focus-visible .btn-a1{transform:translate(-160%,-160%)}.btn:hover .btn-a2,.btn:focus-visible .btn-a2{transform:translate(0)}.btn:hover .btn-arr,.btn:focus-visible .btn-arr{background:var(--btn-chip-h);color:var(--btn-chip-fg-h)}html[dir=rtl] .btn-arr svg{transform:scaleX(-1)}.btn-ping{background:var(--pink);color:#fff;min-width:20px;height:20px;font:600 10px/20px var(--font-mono);text-align:center;opacity:0;border-radius:10px;padding:0 5px;font-style:normal;position:absolute;top:-6px;right:-6px;scale:0}html[dir=rtl] .btn-ping{left:-6px;right:auto}.btn:hover .btn-ping,.btn:focus-visible .btn-ping{animation:btn-ping 1.2s var(--ease-ping) .25s 2}@keyframes btn-ping{0%{opacity:0;scale:0}25%{opacity:1;scale:1.15}45%{scale:1}80%{opacity:1;scale:1}to{opacity:0;scale:.6}}.btn-solid{--btn-bg:var(--ink);--btn-fg:var(--cloud);--btn-fill:var(--acc);--btn-fg-h:var(--on-acc);--btn-chip:var(--acc);--btn-chip-fg:var(--on-acc);--btn-chip-h:var(--ink);--btn-chip-fg-h:var(--cloud)}.btn-acc{--btn-bg:var(--acc);--btn-fg:var(--on-acc);--btn-fill:var(--ink);--btn-fg-h:var(--cloud);--btn-chip:var(--ink);--btn-chip-fg:var(--cloud);--btn-chip-h:var(--acc);--btn-chip-fg-h:var(--on-acc)}.btn-ghost{--btn-bg:#0d0e100f;--btn-fg:var(--ink);--btn-fill:var(--ink);--btn-fg-h:var(--cloud);--btn-chip:#0d0e1014;--btn-chip-fg:var(--ink);--btn-chip-h:var(--acc);--btn-chip-fg-h:var(--on-acc)}.sec-dark .btn-ghost,.on-dark .btn-ghost{--btn-bg:#ffffff1a;--btn-fg:var(--cloud);--btn-fill:var(--cloud);--btn-fg-h:var(--ink);--btn-chip:#ffffff24;--btn-chip-fg:var(--cloud);--btn-chip-h:var(--acc);--btn-chip-fg-h:var(--on-acc);--btn-ring:inset 0 0 0 1px #ffffff24}.btn-quiet{--btn-bg:transparent;--btn-fg:inherit;--btn-fill:#ffffff1a;--btn-fg-h:inherit;--btn-chip:#ffffff24;--btn-chip-fg:inherit;--btn-chip-h:var(--acc);--btn-chip-fg-h:var(--on-acc);--btn-ring:inset 0 0 0 1px #ffffff2e}.btn-sm{min-height:40px;font-size:13px}.btn-sm .btn-face{gap:8px;padding:5px 5px 5px 16px}html[dir=rtl] .btn-sm .btn-face{padding:5px 16px 5px 5px}.btn-sm .btn-arr{width:30px;height:30px}.btn-sm .btn-arr svg{width:13px;height:13px}@media (max-width:600px){.btn{min-height:50px}.btn-face{padding:7px 7px 7px 18px}html[dir=rtl] .btn-face{padding:7px 18px 7px 7px}}@media (prefers-reduced-motion:reduce){.btn{translate:0!important}.btn-fill{clip-path:none;opacity:0;transition:opacity .01ms}.btn:hover .btn-fill{opacity:1}.btn-l1,.btn-l2,.btn-arr>span{transition:none}.btn:hover .btn-l1{translate:0}.btn:hover .btn-l2{translate:0 100%}.btn-ping{display:none}}
