.btn{display:inline-block;width:12rem;height:auto;padding:.15rem;outline:none;border:1px solid var(--gray-200);font-size:.9rem;background:var(--gray-100);cursor:pointer;margin:1rem 0}.btn,.btn .circle{position:relative;border-radius:4rem;transform:scale(0)}.btn .circle{display:block;margin:0;width:3rem;height:3rem;background:var(--base-450);font-size:1.5rem;opacity:0;overflow:hidden;transition:width .5s cubic-bezier(.65,0,.076,1)}.btn .icon{top:.775rem;left:.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{top:50%;left:50%;transform:translate(-50%,-50%);margin:0 0 0 1.25rem;text-align:center;color:var(--gray-500);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:100%}.btn:hover .icon{transform:translate(.75rem)}.btn:hover .button-text{color:var(--base-100)}.btn--green{background:var(--gray-100);border:1px solid var(--gray-200)}.btn--green .circle{background:var(--green-500)}.btn--green:hover .button-text,.btn--green:hover .icon{color:var(--gray-500)}@media (max-width:768px){.btn:hover .circle{width:3rem}.btn:hover .icon{transform:translateX(0)}.btn{background:var(--gray-100);border-color:var(--gray-200)}.btn .button-text{color:var(--base-500)}.btn .icon{color:var(--gray-500)}.btn .circle{background-color:transparent;width:3rem}.btn:hover .button-text,.btn:hover .icon{color:var(--gray-300)}.btn--green{background:var(--green-500);border-color:var(--green-500);transition:background .3s ease,border-color .3s ease}.btn--green .button-text,.btn--green .icon{color:var(--base-100);transition:color .3s ease}.btn--green:hover{background:var(--green-450);border-color:var(--green-450)}.btn--green:hover .button-text,.btn--green:hover .icon{color:var(--green-100)}}