/* Colored References — webview results panel */

:root {
    --row-height: 22px;
    --header-height: 24px;
    --grid: var(--cr-grid, 36% 18% 48px 56px 14% 20%);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    color: var(--vscode-foreground);
    background: var(--vscode-editor-background);
    font-family: var(--vscode-font-family);
    font-size: var(--vscode-font-size);
}

#app {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- toolbar ------------------------------------------------------------ */

#toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--vscode-panel-border, transparent);
    flex: 0 0 auto;
    /* Solid: rows scroll underneath, and a see-through bar over code is unreadable. */
    background: var(--vscode-editor-background);
}

#summary {
    color: var(--vscode-descriptionForeground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: auto;
}

#summary b {
    color: var(--vscode-foreground);
}

#filter {
    width: 200px;
    padding: 2px 6px;
    color: var(--vscode-input-foreground);
    background: var(--vscode-input-background);
    border: 1px solid var(--vscode-input-border, transparent);
    border-radius: 2px;
    font-family: inherit;
    font-size: inherit;
}

#filter:focus {
    outline: 1px solid var(--vscode-focusBorder);
    outline-offset: -1px;
}

#filter::placeholder {
    color: var(--vscode-input-placeholderForeground);
}

.toolbar-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    color: var(--vscode-button-secondaryForeground, var(--vscode-foreground));
    background: var(--vscode-button-secondaryBackground, transparent);
    border: 1px solid var(--vscode-contrastBorder, transparent);
    border-radius: 2px;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.toolbar-button:hover {
    background: var(--vscode-button-secondaryHoverBackground, var(--vscode-toolbar-hoverBackground));
}

.toolbar-button[aria-pressed='true'] {
    color: var(--vscode-button-foreground);
    background: var(--vscode-button-background);
}

.toolbar-button:focus-visible {
    outline: 1px solid var(--vscode-focusBorder);
    outline-offset: -1px;
}

/* --- table -------------------------------------------------------------- */

#head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: var(--grid);
    height: var(--header-height);
    /* The theme's header colour is usually a translucent tint, so it is painted over the
       solid editor background; otherwise rows scrolling underneath show through it. */
    background-color: var(--vscode-editor-background);
    background-image: linear-gradient(
        var(--vscode-keybindingTable-headerBackground, transparent),
        var(--vscode-keybindingTable-headerBackground, transparent));
    border-bottom: 1px solid var(--vscode-panel-border, var(--vscode-editorWidget-border));
    user-select: none;
}

#head .th {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

#head .th:hover {
    background: var(--vscode-toolbar-hoverBackground);
}

#head .th .label {
    overflow: hidden;
    text-overflow: ellipsis;
}

#head .th .arrow {
    flex: 0 0 auto;
    opacity: 0;
    font-size: 9px;
}

#head .th[data-sorted] .arrow {
    opacity: 0.9;
}

#head .th:focus-visible {
    outline: 1px solid var(--vscode-focusBorder);
    outline-offset: -1px;
}

/* Column resize grip: sits on the right edge of every header cell. */
#head .grip {
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
}

#head .grip:hover,
body.resizing #head .grip {
    background: var(--vscode-sash-hoverBorder);
    opacity: 0.6;
}

body.resizing {
    cursor: col-resize;
    user-select: none;
}

#table {
    flex: 1 1 auto;
    overflow: auto;
}

#body {
    outline: none;
}

.row {
    display: grid;
    grid-template-columns: var(--grid);
    height: var(--row-height);
    align-items: center;
    cursor: pointer;
}

.row:hover {
    background: var(--vscode-list-hoverBackground);
}

.row.selected {
    color: var(--vscode-list-inactiveSelectionForeground);
    background: var(--vscode-list-inactiveSelectionBackground);
}

#body:focus-within .row.selected,
#body:focus .row.selected {
    color: var(--vscode-list-activeSelectionForeground);
    background: var(--vscode-list-activeSelectionBackground);
}

.row .td {
    padding: 0 8px;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.td.code {
    font-family: var(--vscode-editor-font-family);
    font-size: var(--vscode-editor-font-size);
    color: var(--cr-fg-default);
}

.td.line {
    text-align: right;
    color: var(--vscode-editorLineNumber-foreground);
    font-family: var(--vscode-editor-font-family);
}

.td.file,
.td.project,
.td.member {
    color: var(--vscode-descriptionForeground);
}

.td.file .name {
    color: var(--vscode-foreground);
}

/* --- group headers ------------------------------------------------------ */

.group {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--row-height);
    padding: 0 8px;
    font-weight: 600;
    background: var(--vscode-sideBarSectionHeader-background);
    border-top: 1px solid var(--vscode-sideBarSectionHeader-border, transparent);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
}

.group .twisty {
    flex: 0 0 auto;
    width: 10px;
    text-align: center;
    opacity: 0.8;
}

.group .count,
.group .project {
    font-weight: normal;
    color: var(--vscode-descriptionForeground);
}


/* --- code tokens -------------------------------------------------------- */

.tok-comment { color: var(--cr-comment); font-style: italic; }
.tok-string  { color: var(--cr-string); }
.tok-keyword { color: var(--cr-keyword); }
.tok-control { color: var(--cr-control); }
.tok-number  { color: var(--cr-number); }
.tok-type    { color: var(--cr-type); }
.tok-call    { color: var(--cr-call); }
.tok-punct   { color: var(--cr-fg-default); }
.tok-variable{ color: var(--cr-variable); }

.hit {
    background: var(--vscode-editor-findMatchHighlightBackground);
    border: 1px solid var(--vscode-editor-findMatchHighlightBorder, transparent);
    border-radius: 2px;
    margin: 0 -1px;
}


/* --- empty state -------------------------------------------------------- */

#empty {
    padding: 16px;
    color: var(--vscode-descriptionForeground);
}

#empty[hidden] {
    display: none;
}

/* --- read / write ------------------------------------------------------- */

.segmented {
    display: flex;
    flex: 0 0 auto;
}

.segmented .segment {
    border-radius: 0;
    border-right-width: 0;
}

.segmented .segment:first-child {
    border-radius: 2px 0 0 2px;
}

.segmented .segment:last-child {
    border-radius: 0 2px 2px 0;
    border-right-width: 1px;
}

.td.kind {
    overflow: hidden;
}

.kind-badge {
    display: inline-block;
    max-width: 100%;
    padding: 0 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 0.9em;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Read and write are a pair, so they get the same treatment: the theme's info and
   warning hues, tinted for the background and border so both stay readable on any
   theme. Before, write was an alert box and read a greyed-out label, which made read
   look disabled rather than merely "not a write". */
.kind-read {
    --kind-hue: var(--vscode-editorInfo-foreground, var(--vscode-textLink-foreground));
}

.kind-write {
    --kind-hue: var(--vscode-editorWarning-foreground, var(--vscode-charts-orange));
}

.kind-read,
.kind-write {
    color: var(--kind-hue);
    background: color-mix(in srgb, var(--kind-hue) 16%, transparent);
    border-color: color-mix(in srgb, var(--kind-hue) 45%, transparent);
}

/* --- filters popover ---------------------------------------------------- */

.popover-host {
    position: relative;
    flex: 0 0 auto;
}

.popover {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 10;
    min-width: 200px;
    max-width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
    color: var(--vscode-menu-foreground, var(--vscode-foreground));
    background: var(--vscode-menu-background, var(--vscode-editorWidget-background));
    border: 1px solid var(--vscode-menu-border, var(--vscode-editorWidget-border));
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36));
}

.popover[hidden] {
    display: none;
}

.popover-heading {
    padding: 6px 6px 2px;
    color: var(--vscode-descriptionForeground);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.popover-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
}

.popover-row:hover {
    background: var(--vscode-list-hoverBackground);
}

.popover-row.disabled {
    opacity: 0.5;
}

.popover-row input {
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--vscode-checkbox-background, var(--vscode-button-background));
}

.popover-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popover-count {
    flex: 0 0 auto;
    color: var(--vscode-descriptionForeground);
    font-variant-numeric: tabular-nums;
}

.popover-actions {
    display: flex;
    gap: 8px;
    padding: 4px 6px 2px;
    border-top: 1px solid var(--vscode-menu-separatorBackground, var(--vscode-panel-border));
    margin-top: 4px;
}

.link-button {
    padding: 0;
    color: var(--vscode-textLink-foreground);
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

.link-button:hover {
    color: var(--vscode-textLink-activeForeground);
    text-decoration: underline;
}