@layer components{.btn-root{position:relative;display:inline-flex;align-items:center;overflow:hidden;cursor:pointer;border:0;border-radius:33px;background-color:var(--color-primary);color:var(--color-primary-foreground);padding:10px 10px 10px 0}.btn-root:after{content:"";position:absolute;top:-2px;left:0;bottom:-2px;width:100%;background-color:var(--color-nav);z-index:1;transform:scaleY(0);perspective:400px;visibility:hidden;transition:transform .3s ease-in-out,visibility .3s ease-in-out}.btn-root:hover:after{transform:scale(1);visibility:visible}.btn-root:hover .btn-text-1{transform:translateY(-200%)}.btn-root:hover .btn-text-2{transform:translateY(0)}.btn-root--two{padding:7px 7px 7px 0}.btn-text{position:relative;z-index:4;overflow:hidden;padding:0 20px 0 37px;text-transform:capitalize}.btn-root--hero .btn-text{padding:0 24px 0 47px}.btn-root--two .btn-text{padding:0 16px 0 32px}.btn-text-1{position:absolute;left:37px;top:0;font-weight:600;font-size:16px;line-height:1.5;color:#fff;transform:translateY(0);transition:transform .3s ease-in-out;white-space:nowrap}.btn-root--hero .btn-text-1{left:47px}.btn-root--two .btn-text-1{left:32px}.btn-text-2{position:relative;display:block;font-weight:600;font-size:16px;line-height:1.5;color:#fff;transform:translateY(196%);transition:transform .3s ease-in-out;white-space:nowrap}.btn-icon{position:relative;z-index:2;display:flex;width:45px;height:45px;flex-shrink:0;align-items:center;justify-content:center;border-radius:50%;background-color:var(--color-accent)}@media (max-width:639px){.btn-root{padding:6px 6px 6px 0}.btn-text{padding:0 15px 0 37px}.btn-icon{width:40px;height:40px}}}