.demos_Container__uGxvk{display:flex;gap:.5rem}.demos_ButtonGroup__brgSS{display:flex}.demos_Button__u71qN{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;margin:0;outline:0;border:1px solid var(--color-gray-200);background-color:var(--color-gray-50);color:var(--color-gray-900);user-select:none;&[data-popup-open]{background-color:var(--color-gray-100)}&:focus-visible{outline:2px solid var(--color-blue);outline-offset:-1px}@media (hover:hover){&:hover{background-color:var(--color-gray-100)}}&:active{background-color:var(--color-gray-100)}&:only-child{border-radius:.375rem}&:first-child:not(:only-child){border-radius:.375rem 0 0 .375rem}&:last-child:not(:only-child){border-radius:0 .375rem .375rem 0}&:not(:first-child){border-left:none}}.demos_Icon__PH09i{width:1.25rem;height:1.25rem}.demos_Popup___r1xN{box-sizing:border-box;font-size:.875rem;line-height:1.25rem;padding:.25rem .5rem;border-radius:.375rem;background-color:canvas;transform-origin:var(--transform-origin);transition:transform .15s,opacity .15s;&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(.9)}&[data-instant]{transition:none}@media (prefers-color-scheme:light){outline:1px solid var(--color-gray-200);box-shadow:0 10px 15px -3px var(--color-gray-200),0 4px 6px -4px var(--color-gray-200)}@media (prefers-color-scheme:dark){outline:1px solid var(--color-gray-300);outline-offset:-1px}}.demos_Arrow__8W7lN{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{top:-8px;rotate:0deg}&[data-side=left]{right:-13px;rotate:90deg}&[data-side=right]{left:-13px;rotate:-90deg}}.demos_ArrowFill__E_8bO{fill:canvas}.demos_ArrowOuterStroke__WbxG_{@media (prefers-color-scheme:light){fill:var(--color-gray-200)}}.demos_ArrowInnerStroke___Sre_{@media (prefers-color-scheme:dark){fill:var(--color-gray-300)}}.demos_ProgrammaticButton__15sQA{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:2.5rem;padding:0 .875rem;margin:0;outline:0;border:1px solid var(--color-gray-200);border-radius:.375rem;background-color:var(--color-gray-50);color:var(--color-gray-900);font-size:1rem;font-weight:500;user-select:none;&:focus-visible{outline:2px solid var(--color-blue);outline-offset:-1px}@media (hover:hover){&:hover{background-color:var(--color-gray-100)}}&:active{background-color:var(--color-gray-100)}}