.btn{--e:cubic-bezier(.65, 0, .35, 1);--e-out:cubic-bezier(.22, 1, .36, 1);isolation:isolate;white-space:nowrap;-webkit-tap-highlight-color:transparent;min-height:52px;transition:transform .45s var(--e-out);border-radius:6px;justify-content:center;align-items:center;padding:0 18px;display:inline-flex;position:relative;overflow:hidden}.btn:active{transform:scale(.98)}.btn-in{transition:transform .45s var(--e-out);align-items:center;gap:10px;display:inline-flex;position:relative}.btn svg{width:19px;height:19px;transition:opacity .3s var(--e), transform .38s var(--e);flex:none}.btn .g-line{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}.btn-lab{text-align:start;padding-block:2px;line-height:1.2;display:grid;overflow:hidden}.btn-lab>span{transition:transform .42s var(--e);flex-direction:column;grid-area:1/1;display:flex}.lab-b{transform:translateY(110%)}.btn-lab b{font-size:16px;font-weight:600}.btn-lab small{opacity:.82;font-size:12.5px}[lang=ar] .btn-lab b{font-size:17px;font-weight:300}[lang=ar] .btn-lab small{font-size:13px}.btn-fill{z-index:-1;background:var(--fill);opacity:0;transition:opacity .3s var(--e);position:absolute;inset:0}.btn-wa{background:var(--color-teal-ink);color:#fff;--fill:var(--color-teal-ink-hover)}.btn-line{color:#fff;--fill:#ffffff24;border:1px solid #ffffff61}.btn-ghost{color:var(--color-blue-dark);--fill:transparent;transition:transform .45s var(--e-out), border-color .3s var(--e);border:1px solid #0d3a6e47}.btn-ghost:is(:focus-visible,:active){border-color:var(--color-blue)}@media (hover:hover) and (pointer:fine){.btn-ghost:hover{border-color:var(--color-blue)}}.btn-line .btn-lab b,.btn-ghost .btn-lab b{font-size:15px;font-weight:400}[lang=ar] :is(.btn-line,.btn-ghost) .btn-lab b{font-size:16px;font-weight:300}.btn:focus-visible{outline:2px solid var(--color-blue);outline-offset:3px}.btn .g-go{display:none}.hv-swap .g-go{opacity:0;margin-inline-start:10px;display:block;position:absolute;inset-inline-start:100%}[dir=rtl] .btn .g-go{scale:-1 1}.hv-roll:focus-visible .lab-a,.hv-roll:active .lab-a{transform:translateY(-110%)}.hv-roll:focus-visible .lab-b,.hv-roll:active .lab-b{transform:none}.hv-swap:focus-visible .btn-in,.hv-swap:active .btn-in{transform:translate(-29px)}[dir=rtl] .hv-swap:focus-visible .btn-in,[dir=rtl] .hv-swap:active .btn-in{transform:translate(29px)}.hv-swap:focus-visible .btn-in>svg:first-child,.hv-swap:active .btn-in>svg:first-child{opacity:0}.hv-swap:focus-visible .g-go,.hv-swap:active .g-go,.btn:focus-visible .btn-fill,.btn:active .btn-fill{opacity:1}@media (hover:hover) and (pointer:fine){.hv-roll:hover .lab-a{transform:translateY(-110%)}.hv-roll:hover .lab-b{transform:none}.hv-swap:hover .btn-in{transform:translate(-29px)}[dir=rtl] .hv-swap:hover .btn-in{transform:translate(29px)}.hv-swap:hover .btn-in>svg:first-child{opacity:0}.hv-swap:hover .g-go,.btn:hover .btn-fill{opacity:1}}