.SegmentedControl{--button-height: calc(var(--size-3) + 2px);display:inline-flex;border-radius:calc(var(--radius-lg) + 4px);border:1px solid var(--color-neutral-10);padding:2px;transition:background-color var(--duration-normal) var(--ease-in-out);position:relative;gap:2px}.SegmentedControl[data-active=true]{background-color:var(--color-neutral-10)}.SegmentedControl[data-active=true]:before{box-sizing:border-box;content:"";width:var(--bg-width);height:calc(var(--button-height) + 2px);position:absolute;top:1px;left:var(--bg-offset);background-color:var(--color-white);border-radius:calc(var(--radius-lg) + 1px);border:1px solid var(--color-neutral-10);transition:all var(--duration-normal)}.SegmentedControl button{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;gap:calc(var(--size-0-5) + var(--size-px));height:var(--button-height);font-size:var(--font-size-sm);padding:0 var(--size-1-5);border-radius:var(--radius-lg);box-shadow:none;transition:background-color var(--duration-normal) var(--ease-in-out);background-color:transparent;border:none;z-index:2}.SegmentedControl bp-icon{--icon-size: 18px !important}.SegmentedControl button:where(:active,:active:hover,[aria-pressed="true"]){background-color:transparent}@media (hover: hover){.SegmentedControl[data-active=true] button:hover{background-color:var(--color-neutral-05);box-shadow:var(--shadow-md)}.SegmentedControl[data-active=true] button:active:hover,.SegmentedControl[data-active=true] button[aria-pressed=true]:hover{background-color:transparent}}