.switch-pills,.ws-switch-pills{display:inline-flex;position:relative;border-radius:42px;padding:6px;background:var(--color-surface-secondary);box-shadow:inset 0 2px 6px hsl(0 0% 0%/.5),var(--wf-shadow-sm);overflow:hidden}.switch-pills--full-width,.ws-switch-pills--full-width{display:flex;width:100%}.switch-pills__button,.ws-switch-pills__button{position:relative;z-index:2;flex:1;min-width:100px;padding:12px 16px;font-size:12px;font-weight:500;line-height:1;color:var(--muted-foreground);background:transparent;border:none;cursor:pointer;transition:color .3s ease;white-space:nowrap;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}.switch-pills__button:hover:not(.switch-pills__button--active),.ws-switch-pills__button:hover:not(.ws-switch-pills__button--active){color:var(--foreground)}.switch-pills__button--active,.ws-switch-pills__button--active{color:hsl(0 0% 100%)}.switch-pills__indicator,.ws-switch-pills__indicator{position:absolute;top:6px;bottom:6px;left:6px;background:var(--wf-accent-primary);border-radius:36px;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1;box-shadow:0 2px 8px hsl(var(--wf-accent-primary-hsl)/.4),var(--wf-shadow-sm)}.switch-pills--xs,.ws-switch-pills--xs{height:32px;border-radius:20px;padding:3px}.switch-pills--xs .switch-pills__button,.ws-switch-pills--xs .ws-switch-pills__button{padding:6px 12px;font-size:12px;min-width:auto}.switch-pills--xs .switch-pills__indicator,.ws-switch-pills--xs .ws-switch-pills__indicator{top:3px;bottom:3px;left:3px;border-radius:17px}.switch-pills--sm,.ws-switch-pills--sm{height:40px;border-radius:28px;padding:4px}.switch-pills--sm .switch-pills__button,.ws-switch-pills--sm .ws-switch-pills__button{padding:8px 16px;font-size:13px}.switch-pills--sm .switch-pills__indicator,.ws-switch-pills--sm .ws-switch-pills__indicator{top:4px;bottom:4px;left:4px;border-radius:24px}.switch-pills--md,.ws-switch-pills--md{height:48px}.switch-pills--lg,.ws-switch-pills--lg{height:56px}.switch-pills--2 .switch-pills__indicator,.ws-switch-pills--2 .ws-switch-pills__indicator{width:calc(50% - 6px)}.switch-pills--2 .switch-pills__button:nth-child(2).switch-pills__button--active~.switch-pills__indicator,.ws-switch-pills--2 .ws-switch-pills__button:nth-child(2).ws-switch-pills__button--active~.ws-switch-pills__indicator{transform:translateX(calc(100% + 6px))}.switch-pills--3 .switch-pills__indicator,.ws-switch-pills--3 .ws-switch-pills__indicator{width:calc(33.333% - 6px)}.switch-pills--3 .switch-pills__button:nth-child(2).switch-pills__button--active~.switch-pills__indicator,.ws-switch-pills--3 .ws-switch-pills__button:nth-child(2).ws-switch-pills__button--active~.ws-switch-pills__indicator{transform:translateX(calc(100% + 6px))}.switch-pills--3 .switch-pills__button:nth-child(3).switch-pills__button--active~.switch-pills__indicator,.ws-switch-pills--3 .ws-switch-pills__button:nth-child(3).ws-switch-pills__button--active~.ws-switch-pills__indicator{transform:translateX(calc(200% + 12px))}.switch-pills--4 .switch-pills__indicator,.ws-switch-pills--4 .ws-switch-pills__indicator{width:calc(25% - 6px)}.switch-pills--4 .switch-pills__button:nth-child(2).switch-pills__button--active~.switch-pills__indicator,.ws-switch-pills--4 .ws-switch-pills__button:nth-child(2).ws-switch-pills__button--active~.ws-switch-pills__indicator{transform:translateX(calc(100% + 6px))}.switch-pills--4 .switch-pills__button:nth-child(3).switch-pills__button--active~.switch-pills__indicator,.ws-switch-pills--4 .ws-switch-pills__button:nth-child(3).ws-switch-pills__button--active~.ws-switch-pills__indicator{transform:translateX(calc(200% + 12px))}.switch-pills--4 .switch-pills__button:nth-child(4).switch-pills__button--active~.switch-pills__indicator,.ws-switch-pills--4 .ws-switch-pills__button:nth-child(4).ws-switch-pills__button--active~.ws-switch-pills__indicator{transform:translateX(calc(300% + 18px))}.switch-pills--5 .switch-pills__indicator,.ws-switch-pills--5 .ws-switch-pills__indicator{width:calc(20% - 6px)}.switch-pills--5 .switch-pills__button:nth-child(2).switch-pills__button--active~.switch-pills__indicator,.ws-switch-pills--5 .ws-switch-pills__button:nth-child(2).ws-switch-pills__button--active~.ws-switch-pills__indicator{transform:translateX(calc(100% + 6px))}.switch-pills--5 .switch-pills__button:nth-child(3).switch-pills__button--active~.switch-pills__indicator,.ws-switch-pills--5 .ws-switch-pills__button:nth-child(3).ws-switch-pills__button--active~.ws-switch-pills__indicator{transform:translateX(calc(200% + 12px))}.switch-pills--5 .switch-pills__button:nth-child(4).switch-pills__button--active~.switch-pills__indicator,.ws-switch-pills--5 .ws-switch-pills__button:nth-child(4).ws-switch-pills__button--active~.ws-switch-pills__indicator{transform:translateX(calc(300% + 18px))}.switch-pills--5 .switch-pills__button:nth-child(5).switch-pills__button--active~.switch-pills__indicator,.ws-switch-pills--5 .ws-switch-pills__button:nth-child(5).ws-switch-pills__button--active~.ws-switch-pills__indicator{transform:translateX(calc(400% + 24px))}.switch-pills--primary .switch-pills__indicator,.ws-switch-pills--primary .ws-switch-pills__indicator{background:var(--wf-accent-primary);box-shadow:0 2px 8px hsl(var(--wf-accent-primary-hsl)/.4)}.switch-pills--blue .switch-pills__indicator,.ws-switch-pills--blue .ws-switch-pills__indicator{background:var(--wf-accent-blue);box-shadow:0 2px 8px hsl(var(--wf-accent-blue-hsl)/.4)}.switch-pills--purple .switch-pills__indicator,.ws-switch-pills--purple .ws-switch-pills__indicator{background:var(--wf-accent-purple);box-shadow:0 2px 8px hsl(var(--wf-accent-purple-hsl)/.4)}.switch-pills--green .switch-pills__indicator,.ws-switch-pills--green .ws-switch-pills__indicator{background:var(--wf-accent-green);box-shadow:0 2px 8px hsl(var(--wf-accent-green-hsl)/.4)}.switch-pills__icon--vertical{transform:rotate(90deg)}.switch-pills--icon-only .switch-pills__button,.ws-switch-pills--icon-only .ws-switch-pills__button{min-width:auto;padding:8px 10px}.switch-pills--xs.switch-pills--icon-only .switch-pills__button,.ws-switch-pills--xs.ws-switch-pills--icon-only .ws-switch-pills__button{padding:5px 8px}