.btn{isolation:isolate;align-items:center;gap:var(--space-sm);border-radius:var(--radius-pill);background:var(--glass-light);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:12rem;height:3.3rem;color:var(--base-500);font-size:var(--text-body);white-space:nowrap;padding:.15rem 1.5rem .15rem .15rem;font-weight:600;line-height:1;display:inline-flex;position:relative}.btn[data-animate]{transform:scale(0)}.btn-circle{z-index:-1;border-radius:var(--radius-pill);background:var(--base-450);width:3rem;transition:width var(--duration-base) var(--ease-smooth);position:absolute;top:.15rem;bottom:.15rem;left:.15rem}.btn-icon{width:3rem;height:3rem;color:var(--base-100);transition:transform var(--duration-base) var(--ease-smooth);flex-shrink:0;place-items:center;font-size:1.5rem;display:grid}.btn-label-mask{text-align:center;flex:1;padding:.2em 0;overflow:hidden}.btn-label{transition:color var(--duration-base) var(--ease-smooth);display:block}@media (hover:hover){.btn:hover .btn-circle{width:calc(100% - .3rem)}.btn:hover .btn-icon{transform:translate(.75rem)}.btn:hover .btn-label{color:var(--base-100)}}