.pill{align-items:center;gap:var(--space-2);height:2.75rem;padding-inline:var(--space-5);border-radius:var(--radius-pill);background:var(--c-cedar-700);color:var(--ink);font-family:var(--font-text);font-weight:var(--fw-semibold);font-size:var(--fs-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:color var(--dur-fast) var(--ease-smooth), background-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);border:none;display:inline-flex}.pill:hover{color:var(--accent);transform:translateY(-2px)}.pill:active{transform:translate(0,0)}.pill_primary{background:var(--accent);color:var(--c-cedar)}.pill_primary:hover{background:var(--c-clay-light);color:var(--c-cedar)}.pill_menu{padding-inline-start:var(--space-4)}.pill__icon{flex-shrink:0;block-size:1.1rem;inline-size:1.1rem;display:block;position:relative;overflow:hidden}.pill__icon>svg{block-size:100%;inline-size:100%;transition:transform .7s var(--ease-out-expo);display:block}.pill__icon>svg:first-child{color:var(--ink)}.pill__icon>svg:last-child{color:var(--pill-icon-ink-on-fill,var(--c-cedar));position:absolute;inset:0;transform:translateY(100%)}.pill__burger{flex-direction:column;justify-content:center;gap:4px;width:16px;display:inline-flex}.pill__burger span{border-radius:var(--radius-pill);background:currentColor;height:1.5px;display:block}.pill__burger span:first-child{width:16px}.pill__burger span:last-child{width:11px}.pill__burger-roll{flex-shrink:0;align-self:center;block-size:1.1rem;inline-size:16px;position:relative;overflow:hidden}.pill__burger-roll>.pill__burger{block-size:100%;transition:transform .7s var(--ease-out-expo);display:flex}.pill__burger-roll>.pill__burger:first-child{color:var(--ink)}.pill__burger-roll>.pill__burger:last-child{color:var(--pill-icon-ink-on-fill,var(--c-cedar));position:absolute;inset:0;transform:translateY(100%)}.pill__label{color:var(--ink);--text-slide-ink-2:var(--c-cedar);transform:translateY(1px)}.icon-btn{isolation:isolate;border-radius:var(--radius-circle);background:var(--c-cedar-700);width:2.75rem;height:2.75rem;color:var(--ink);transition:color .34s var(--ease-smooth) .16s;border:none;place-items:center;display:grid;position:relative;overflow:hidden}.icon-btn__roll{block-size:1.25rem;inline-size:1.25rem;display:block;position:relative;overflow:hidden}.icon-btn__roll>svg{block-size:100%;inline-size:100%;transition:transform .7s var(--ease-out-expo);display:block}.icon-btn__roll>svg:first-child{color:var(--ink)}.icon-btn__roll>svg:last-child{color:var(--icon-btn-ink-on-fill,var(--c-cedar));position:absolute;inset:0;transform:translateY(100%)}.icon-btn:before{content:"";z-index:-1;background:var(--paper);border-radius:50% 50% 0 0;transition:transform .5s cubic-bezier(.4,0,0,1),border-radius .5s cubic-bezier(.4,0,0,1);position:absolute;inset:0;transform:translateY(101%)}.icon-btn:hover,.icon-btn:focus-visible{color:var(--icon-btn-ink-on-fill,var(--c-cedar))}.icon-btn:hover:before,.icon-btn:focus-visible:before{border-radius:0;transition-duration:.5s,.9s;transform:translate(0,0)}.icon-btn:hover .icon-btn__roll>svg:first-child,.icon-btn:focus-visible .icon-btn__roll>svg:first-child{transform:translateY(-100%)}.icon-btn:hover .icon-btn__roll>svg:last-child,.icon-btn:focus-visible .icon-btn__roll>svg:last-child{transform:translate(0,0)}@media (prefers-reduced-motion:reduce){.icon-btn:before,.pill__icon>svg,.pill__burger-roll>.pill__burger,.icon-btn__roll>svg{transition:none}}