.button-wrap.article-swap-btn{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:color-mix(in srgb, var(--color-bw) 10%, transparent);border:1px solid var(--color-border);width:max-content;--pill-x: 0px;--pill-w: 0px}.button-wrap.article-swap-btn::before{content:"";position:absolute;top:3px;left:3px;height:calc(100% - 6px);width:var(--pill-w);transform:translateX(calc(var(--pill-x) - 1px));border-radius:999px;background:var(--color1);box-shadow:0 1px 0 0 color-mix(in srgb, var(--color-bw) 12%, transparent) inset;transition:none;will-change:transform, width}.button-wrap.article-swap-btn.is-springing::before{animation:pill-spring 520ms cubic-bezier(0.2, 0.9, 0.2, 1)}@keyframes pill-spring{0%{transform:translateX(var(--pill-x))}70%{transform:translateX(calc(var(--pill-x) + 10px))}100%{transform:translateX(var(--pill-x))}}.button-wrap.article-swap-btn .btn{position:relative;z-index:1;cursor:pointer;user-select:none;border-radius:999px;padding:7px 12px;line-height:1;font-weight:800;font-size:var(--font-xsmall);letter-spacing:0.02em;text-transform:none;color:color-mix(in srgb, var(--color-bw) 78%, transparent);transition:color 160ms ease, transform 0.08s ease}.button-wrap.article-swap-btn .btn.active{color:var(--color3)}.button-wrap.article-swap-btn .btn p{font-size:var(--font-medium);margin:0}.button-wrap.article-swap-btn .btn:hover{color:color-mix(in srgb, var(--color-bw) 92%, transparent)}.button-wrap.article-swap-btn .btn.active{color:var(--color3)}@media (prefers-reduced-motion: reduce){.button-wrap.article-swap-btn::before{transition:none}}