@import "component.css";:host{display:block;margin:0 auto;max-width:100%;min-width:90vw;overflow:auto;width:fit-content}.query-container{display:flex;gap:var(--m-sm);margin:var(--m-md);@media (max-width:720px){display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,auto)}}.table-container{border-radius:var(--bd-radius);height:calc(100dvh - 175px);margin:var(--m-md);overflow:auto;@media (max-width:480px){font-size:var(--fs-sm)}@media (max-width:720px){height:calc(100dvh - 230px)}&.drag-hint{cursor:grab}&.drag-dragging{cursor:grabbing;user-select:none}}code-editor{background:var(--bg-textarea);border:4px solid var(--border-default);border-radius:var(--bd-radius);flex:1;grid-column:1/-1;padding:12px;position:relative;transition:border-color var(--trans-md);&:focus{border-color:var(--border-focus);outline:none}.editor{inset:0;position:absolute}}.button{align-items:center;display:inline-flex;justify-content:center;position:relative;&.dropdown:focus .menu{transform:translateY(112%) scaleY(1)}.menu{bottom:0;display:flex;flex-direction:column;gap:5px;left:0;position:absolute;right:0;transform:translateY(112%) scaleY(0);transform-origin:0 0;transition:transform .1s ease;z-index:100;& button{padding-block:4px}}}.infobar{display:flex;justify-content:space-between;margin:var(--m-md)}table{border-collapse:separate;border-spacing:0;border-top-width:1px;border:1px solid var(--th-bg);border-radius:var(--bd-radius);border-top:0 solid var(--th-bg);display:grid;grid-template-columns:var(--cols);min-width:100%;position:relative;width:fit-content}tbody,thead{display:grid;grid-auto-rows:40px;grid-column:1/-1;grid-template-columns:subgrid}thead{position:sticky;top:0}tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid;&:nth-child(odd){background:var(--tr-odd)}&:hover td{background:color-mix(in srgb,var(--bg-tertiary),transparent 35%)}}td,th{padding:var(--m-sm) 15px;text-align:left}th{background:var(--th-bg);cursor:pointer;transition:background var(--trans-md);user-select:none;white-space:nowrap;&:hover{background:var(--th-hover)}&.sorted{&:after{content:" ▼"}&.asc:after{content:" ▲"}}}td{color:var(--text-secondary);font-family:var(--font-condensed);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&[data-prop=name]{font-weight:700}}a{color:var(--text-primary);text-decoration:none;transition:color var(--trans-fast);&:hover{color:var(--text-hover)}}