.pill-button{--pill-pad-x:24px;--pill-pad-y:12px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:var(--pill-pad-y) var(--pill-pad-x);background:var(--base);color:var(--pill-text);border:1px solid var(--pill-text);border-radius:9999px;box-sizing:border-box;font-weight:500;font-size:16px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;overflow:hidden;transition:color .3s ease}.pill-button.is-active{background:var(--pill-bg);color:var(--hover-text);border-color:var(--pill-bg);font-weight:600}.pill-button.is-active .pill-label-hover{opacity:0;transform:translateY(100%)}.pill-button.is-active .pill-label{transform:translateY(0)!important}.pill-button:not(.is-active):hover .pill-label{transform:translateY(calc(-100% - 8px))}.pill-button:not(.is-active):hover .pill-label-hover{transform:translateY(0);opacity:1}.pill-button .hover-circle{position:absolute;left:50%;bottom:0;border-radius:50%;background:var(--pill-bg);z-index:1;display:block;pointer-events:none;will-change:transform}.pill-button .label-stack,.pill-button .pill-label{position:relative;display:inline-flex;align-items:center;gap:8px;line-height:1;z-index:2}.pill-button .pill-label{will-change:transform}.pill-button .pill-label-hover{position:absolute;left:0;top:0;color:var(--hover-text);z-index:3;display:inline-flex;align-items:center;gap:8px;will-change:transform,opacity}.pill-button .pill-label-hover>svg{color:var(--hover-text)}