.btn{position:relative;display:inline-block;width:12rem;height:auto;padding:.15rem;outline:none;border:none;font-size:.9rem;background:rgba(242,237,230,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:4rem;cursor:pointer;margin:1rem 0;transform:scale(0)}html[dir=rtl] .btn{width:14rem;overflow:hidden}.btn .circle{position:relative;display:block;margin:0;width:3rem;height:3rem;background:var(--mhg-primary);border-radius:4rem;font-size:1.5rem;transform:scale(0);overflow:hidden;transition:width .5s cubic-bezier(.65,0,.076,1)}.btn .icon{inset-block-start:.775rem;inset-inline-start:.95rem;color:var(--base-100);font-size:1.5rem;transform:translateX(0);will-change:transform}.btn .button-text,.btn .icon{position:absolute;transition:all .5s cubic-bezier(.65,0,.076,1)}.btn .button-text{inset-block-start:50%;inset-inline-start:50%;-webkit-margin-start:1.25rem;margin-inline-start:1.25rem;text-align:center;color:var(--base-500);font-family:Uni-Sans,sans-serif;font-weight:600;line-height:1;white-space:nowrap}.btn .button-text,html[dir=rtl] .btn .button-text{transform:translate(-50%,-50%);max-width:calc(100% - 5rem)}html[dir=rtl] .btn .button-text{left:50%;right:auto;margin-left:0;margin-right:0;padding:0;overflow:visible}.btn .line{position:relative;transform:translateY(100%);will-change:transform;padding-bottom:.2em;margin-bottom:-.2em}.btn:hover .circle{width:100%}html[dir=ltr] .btn:hover .icon{transform:translateX(.75rem)}html[dir=rtl] .btn:hover .icon{transform:translateX(-.75rem)}.btn:hover .button-text{color:var(--base-100)}