.toggle-group-demo{gap:20px;display:grid}.toggle-group-demo-card{border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-panel);background:var(--sprout-surface);min-width:0;overflow:hidden}.toggle-group-demo-card>header{border-bottom:1px solid var(--sprout-line);padding:14px 20px}.toggle-group-demo-card h3{font-size:13px;font-weight:550}.toggle-group-demo-card header p{color:var(--sprout-muted);margin-top:2px;font-size:12px;line-height:1.6}.toggle-group-demo-card-body{background:var(--sprout-canvas);gap:16px;min-width:0;padding:20px;display:grid}.toggle-group-demo-strong{font-size:14px;font-weight:550}.toggle-group-demo-muted{color:var(--sprout-muted);font-size:13px;line-height:1.5}.toggle-group-demo-caption{color:var(--sprout-muted);font-size:12px}.toggle-group-demo-panel{border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-panel);background:var(--sprout-surface);gap:16px;min-width:0;padding:16px;display:grid}.toggle-group-demo-wrap{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.toggle-group-demo-matrix{gap:12px;display:grid}.toggle-group-demo-matrix-row{border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-panel);background:var(--sprout-surface);grid-template-columns:minmax(0,1fr);gap:12px;padding:14px 16px;display:grid}@media (width>=720px){.toggle-group-demo-matrix-row{grid-template-columns:9rem repeat(2,minmax(0,1fr));align-items:center}}.toggle-group-demo-matrix-label p{font-size:13px;font-weight:550}.toggle-group-demo-matrix-label span{color:var(--sprout-muted);font-size:12px}.toggle-group-demo-matrix-cell{justify-items:start;gap:6px;min-width:0;display:grid}.toggle-group-demo-usage-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.toggle-group-demo-empty{text-align:center;justify-items:center;gap:4px;padding:24px 12px;display:grid}.toggle-group-demo-empty>svg{color:var(--sprout-muted);margin-bottom:4px}.toggle-group-demo-table{border-collapse:collapse;width:100%;font-size:13px}.toggle-group-demo-table caption{caption-side:bottom;color:var(--sprout-muted);text-align:start;padding-top:8px;font-size:12px}.toggle-group-demo-table th,.toggle-group-demo-table td{border-bottom:1px solid var(--sprout-line);text-align:start;overflow-wrap:anywhere;padding:8px 4px}.toggle-group-demo-table th{color:var(--sprout-muted);font-weight:500}.toggle-group-demo-table td:last-child,.toggle-group-demo-table th:last-child{text-align:end;font-variant-numeric:tabular-nums}.toggle-group-demo-toolbar-controls{color:var(--sprout-muted);flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:12px;display:flex}.toggle-group-demo-query{container-type:inline-size}.toggle-group-demo-query-bar{flex-direction:column;align-items:flex-start;gap:8px;min-width:0;display:flex}@container (width>=32rem){.toggle-group-demo-query-bar{flex-direction:row;align-items:center}}.toggle-group-demo-tools{border:0;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;margin:0;padding:0;display:flex}.toggle-group-demo-rows{gap:8px;min-width:0;display:grid}.toggle-group-demo-rows[data-layout=board]{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}.toggle-group-demo-row{border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-control);justify-content:space-between;align-items:center;gap:12px;min-width:0;padding:8px 10px;font-size:13px;display:flex}.toggle-group-demo-rows[data-layout=table] .toggle-group-demo-row{border-width:0 0 1px;border-radius:0}.toggle-group-demo-rows[data-layout=board] .toggle-group-demo-row{flex-direction:column;align-items:flex-start;gap:4px}.toggle-group-demo-row>span:first-child{text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;overflow:hidden}.toggle-group-demo-row>span:last-child{color:var(--sprout-muted);flex-shrink:0;font-size:12px}.toggle-group-demo-skeleton{border-radius:var(--sprout-radius-control);background:var(--sprout-hover);height:36px}.toggle-group-demo-error{color:var(--sprout-danger);font-size:13px}.toggle-group-demo-vertical{flex-wrap:wrap;align-items:flex-start;gap:24px 40px;display:flex}.toggle-group-demo-stack{justify-items:start;gap:8px;min-width:0;display:grid}.toggle-group-demo-stack .sprout-toggle-group[data-orientation=vertical]{min-width:9rem}
