.btn{--btn-inset:2.5px;--btn-icon-size:48px;position:relative;display:inline-flex;align-items:center;width:max-content;min-width:12rem;height:53px;padding:var(--btn-inset) 1.25rem var(--btn-inset) calc(var(--btn-inset) + var(--btn-icon-size) + 1rem);outline:none;border:1px solid rgb(var(--deep-mocha-rgb)/.08);font-size:.9rem;background:var(--color-button-surface);cursor:pointer;margin:1rem 0}.btn,.btn .circle{border-radius:4rem;transform:scale(0)}.btn .circle{top:50%;left:var(--btn-inset);display:block;margin:-24px 0 0;width:var(--btn-icon-size);height:var(--btn-icon-size);background:var(--deep-mocha);overflow:hidden;transition:width .5s cubic-bezier(.65,0,.076,1)}.btn .circle,.btn .icon{position:absolute;font-size:1.5rem}.btn .icon{top:.775rem;left:.95rem;color:var(--lavender-mist);transform:translateX(0);will-change:transform}.btn .button-text,.btn .icon{transition:all .5s cubic-bezier(.65,0,.076,1)}.btn .button-text{position:relative;z-index:1;margin:0;text-align:center;color:var(--deep-mocha);font-family:Manrope,sans-serif;font-weight:600;line-height:1;white-space:nowrap}.btn .line{position:relative;transform:translateY(100%);will-change:transform;padding-bottom:.2em;margin-bottom:-.2em}.btn:hover .circle{width:calc(100% - var(--btn-inset) - var(--btn-inset))}.btn:hover .icon{transform:translate(.75rem)}.btn:hover .button-text{color:var(--lavender-mist)}.btn:focus-visible{outline:2px solid var(--deep-mocha);outline-offset:3px}