<template>
	<div :class="['run-data-view', $style.container]">
		<BinaryDataDisplay :windowVisible="binaryDataDisplayVisible" :displayData="binaryDataDisplayData" @close="closeBinaryDataDisplay"/>

		<div :class="$style.header">
			<div>
				<span :class="$style.title">{{ $locale.baseText('runData.output') }}</span>
				<n8n-tooltip
					v-if="runMetadata"
					placement="right"
				>
					<div slot="content">
						<n8n-text :bold="true" size="small">{{ $locale.baseText('runData.startTime') + ':' }}</n8n-text> {{runMetadata.startTime}}<br/>
						<n8n-text :bold="true" size="small">{{ $locale.baseText('runData.executionTime') + ':' }}</n8n-text> {{runMetadata.executionTime}} {{ $locale.baseText('runData.ms') }}
					</div>
					<font-awesome-icon icon="info-circle" :class="$style.infoIcon" />
				</n8n-tooltip>
			</div>
			<div>
				<!-- <div v-else class="title-text">
					<n8n-text :bold="true">{{ $locale.baseText('runData.items') }}:</n8n-text>
					<span class="opts">
						<n8n-select size="mini" v-model="maxDisplayItems" @click.stop>
							<n8n-option v-for="option in maxDisplayItemsOptions" :label="option" :value="option" :key="option" />
						</n8n-select>
					</span>/
					<n8n-text :bold="true">{{ dataCount }}</n8n-text>
				</div> -->

				<!-- <n8n-text :bold="true" v-if="maxOutputIndex > 0">
					| {{ $locale.baseText('runData.output') }}:
				</n8n-text> -->
				<!-- <span class="opts" v-if="maxOutputIndex > 0" >
					<n8n-select size="mini" v-model="outputIndex" @click.stop>
						<n8n-option v-for="option in (maxOutputIndex + 1)" :label="getOutputName(option-1)" :value="option -1" :key="option">
						</n8n-option>
					</n8n-select>
				</span> -->

				<!-- <n8n-text :bold="true" v-if="maxRunIndex > 0">
					| {{ $locale.baseText('runData.dataOfExecution') }}:
				</n8n-text> -->
				<span class="opts">
					<n8n-select v-if="maxRunIndex > 0" size="mini" v-model="runIndex" @click.stop>
						<n8n-option v-for="option in (maxRunIndex + 1)" :label="option + '/' + (maxRunIndex+1)" :value="option-1" :key="option">
						</n8n-option>
					</n8n-select>
				</span>
			</div>

			<div v-if="!hasRunError" @click.stop>
				<n8n-radio-buttons
					v-model="displayMode"
					:options="buttons"
				/>
			</div>

			<div v-if="hasNodeRun && !hasRunError && displayMode === 'json' && state.path !== deselectedPlaceholder" class="select-button">
				<el-dropdown trigger="click" @command="handleCopyClick">
					<span class="el-dropdown-link">
						<n8n-icon-button :title="$locale.baseText('runData.copyToClipboard')" icon="copy" />
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="{command: 'itemPath'}">
							{{ $locale.baseText('runData.copyItemPath') }}
						</el-dropdown-item>
						<el-dropdown-item :command="{command: 'parameterPath'}">
							{{ $locale.baseText('runData.copyParameterPath') }}
						</el-dropdown-item>
						<el-dropdown-item :command="{command: 'value'}">
							{{ $locale.baseText('runData.copyValue') }}
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>

		<div>
			<n8n-text v-if="hasNodeRun && dataCount > 0">
				{{ dataCount }} {{ $locale.baseText(dataCount === 1 ? 'node.output.item' : 'node.output.items') }}
			</n8n-text>
		</div>

		<div v-if="!hasNodeRun" :class="$style.center">
			<div v-if="workflowRunning">
				<div :class="$style.spinner"><n8n-spinner /></div>
				<n8n-text>{{ $locale.baseText('node.output.executing') }}</n8n-text>
			</div>
			<n8n-text v-else>{{ $locale.baseText('node.output.runNodeHint') }}</n8n-text>
		</div>

		<div v-else-if="hasNodeRun && hasRunError" :class="$style.dataDisplay">
			<NodeErrorView :error="workflowRunData[node.name][runIndex].error" />
		</div>

		<div v-else-if="hasNodeRun && jsonData && jsonData.length === 0" :class="$style.center">
			<n8n-text :bold="true">{{ $locale.baseText('node.output.noOutputData.title') }}</n8n-text>
			<n8n-text>
				{{ $locale.baseText('node.output.noOutputData.message') }}
				<a @click="openSettings">{{ $locale.baseText('node.output.noOutputData.message.settings') }}</a>
				{{ $locale.baseText('node.output.noOutputData.message.settingsOption') }}
			</n8n-text>
		</div>

		<div v-else-if="hasNodeRun && !showData" :class="$style.center">
			<n8n-text :bold="true">{{ $locale.baseText('node.output.tooMuchData.title') }}</n8n-text>
			<n8n-text align="center" tag="div"><span v-html="$locale.baseText('node.output.tooMuchData.message', { interpolate: {size: dataSizeInMB }})"></span></n8n-text>

			<n8n-button
				type="outline"
				:label="$locale.baseText('node.output.tooMuchData.showDataAnyway')"
				@click="showData = true"
			/>
		</div>

		<div v-else-if="hasNodeRun && displayMode === 'table' && tableData && tableData.columns && tableData.columns.length === 0" :class="$style.dataDisplay">
			<table :class="$style.table">
				<tr>
					<th :class="$style.emptyCell"></th>
				</tr>
				<tr v-for="(row, index1) in tableData.data" :key="index1">
					<td>
						<n8n-text>{{ $locale.baseText('node.output.emptyOutput') }}</n8n-text>
					</td>
				</tr>
			</table>
		</div>

		<div v-else-if="hasNodeRun && displayMode === 'table' && tableData" :class="$style.dataDisplay">
			<table :class="$style.table">
				<tr>
					<th v-for="column in (tableData.columns || [])" :key="column">{{column}}</th>
				</tr>
				<tr v-for="(row, index1) in tableData.data" :key="index1">
					<td v-for="(data, index2) in row" :key="index2">{{ [null, undefined].includes(data) ? '&nbsp;' : data }}</td>
				</tr>
			</table>
		</div>

		<div v-else-if="hasNodeRun && displayMode === 'json'" :class="$style.jsonDisplay">
			<vue-json-pretty
				:data="jsonData"
				:deep="10"
				v-model="state.path"
				:showLine="true"
				:showLength="true"
				selectableType="single"
				path=""
				:highlightSelectedNode="true"
				:selectOnClickNode="true"
				@click="dataItemClicked"
				class="json-data"
			/>
		</div>

		<div v-else-if="displayMode === 'binary' && binaryData.length === 0" :class="$style.center">
			<n8n-text align="center" tag="div">{{ $locale.baseText('runData.noBinaryDataFound') }}</n8n-text>
		</div>

		<div v-else-if="displayMode === 'binary'" :class="$style.dataDisplay">
			<div v-for="(binaryDataEntry, index) in binaryData" :key="index">
				<div class="binary-data-row-index" v-if="binaryData.length > 1">
					<div class="binary-data-cell-index">
						{{index + 1}}
					</div>
				</div>

				<div class="binary-data-row">
					<div class="binary-data-cell" v-for="(binaryData, key) in binaryDataEntry" :key="index + '_' + key">
						<div class="binary-data-information">
							<div class="binary-data-cell-name">
								{{key}}
							</div>
							<div v-if="binaryData.fileName">
								<div class="label">{{ $locale.baseText('runData.fileName') }}: </div>
								<div class="value">{{binaryData.fileName}}</div>
							</div>
							<div v-if="binaryData.directory">
								<div class="label">{{ $locale.baseText('runData.directory') }}: </div>
								<div class="value">{{binaryData.directory}}</div>
							</div>
							<div v-if="binaryData.fileExtension">
								<div class="label">{{ $locale.baseText('runData.fileExtension') }}:</div>
								<div class="value">{{binaryData.fileExtension}}</div>
							</div>
							<div v-if="binaryData.mimeType">
								<div class="label">{{ $locale.baseText('runData.mimeType') }}: </div>
								<div class="value">{{binaryData.mimeType}}</div>
							</div>

							<div class="binary-data-show-data-button-wrapper">
								<n8n-button size="small" :label="$locale.baseText('runData.showBinaryData')" class="binary-data-show-data-button" @click="displayBinaryData(index, key)" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script lang="ts">
//@ts-ignore
import VueJsonPretty from 'vue-json-pretty';
import {
	GenericValue,
	IBinaryKeyData,
	IDataObject,
	INodeExecutionData,
	INodeTypeDescription,
	IRunData,
	IRunExecutionData,
	ITaskData,
} from 'n8n-workflow';

import {
	IBinaryDisplayData,
	IExecutionResponse,
	INodeUi,
	ITableData,
} from '@/Interface';

import {
	MAX_DISPLAY_DATA_SIZE,
	MAX_DISPLAY_ITEMS_AUTO_ALL,
} from '@/constants';

import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue';
import NodeErrorView from '@/components/Error/NodeErrorView.vue';

import { copyPaste } from '@/components/mixins/copyPaste';
import { externalHooks } from "@/components/mixins/externalHooks";
import { genericHelpers } from '@/components/mixins/genericHelpers';
import { nodeHelpers } from '@/components/mixins/nodeHelpers';

import mixins from 'vue-typed-mixins';

// A path that does not exist so that nothing is selected by default
const deselectedPlaceholder = '_!^&*';

export default mixins(
	copyPaste,
	externalHooks,
	genericHelpers,
	nodeHelpers,
)
	.extend({
		name: 'RunData',
		components: {
			BinaryDataDisplay,
			NodeErrorView,
			VueJsonPretty,
		},
		data () {
			return {
				binaryDataPreviewActive: false,
				dataSize: 0,
				deselectedPlaceholder,
				displayMode: 'table',
				state: {
					value: '' as object | number | string,
					path: deselectedPlaceholder,
				},
				runIndex: 0,
				showData: false,
				outputIndex: 0,
				maxDisplayItems: 25 as number | null,
				binaryDataDisplayVisible: false,
				binaryDataDisplayData: null as IBinaryDisplayData | null,

				MAX_DISPLAY_DATA_SIZE,
				MAX_DISPLAY_ITEMS_AUTO_ALL,
			};
		},
		mounted() {
			this.init();
		},
		computed: {
			buttons(): {label: string, value: string}[] {
				const defaults = [
					{ label: this.$locale.baseText('runData.json'), value: 'json'},
					{ label: this.$locale.baseText('runData.table'), value: 'table'},
				];
				if (this.binaryData.length) {
					return [ ...defaults,
						{ label: this.$locale.baseText('runData.binary'), value: 'binary'},
					];
				}

				return defaults;
			},
			hasNodeRun(): boolean {
				return Boolean(this.node && this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name));
			},
			hasRunError(): boolean {
				return Boolean(this.node && this.workflowRunData && this.workflowRunData[this.node.name] && this.workflowRunData[this.node.name][this.runIndex] && this.workflowRunData[this.node.name][this.runIndex].error);
			},
			workflowRunning (): boolean {
				return this.$store.getters.isActionActive('workflowRunning');
			},
			workflowExecution (): IExecutionResponse | null {
				return this.$store.getters.getWorkflowExecution;
			},
			workflowRunData (): IRunData | null {
				if (this.workflowExecution === null) {
					return null;
				}
				const executionData: IRunExecutionData = this.workflowExecution.data;
				return executionData.resultData.runData;
			},
			maxDisplayItemsOptions (): number[] {
				const options = [25, 50, 100, 250, 500, 1000].filter(option => option <= this.dataCount);
				if (!options.includes(this.dataCount)) {
					options.push(this.dataCount);
				}
				return options;
			},
			node (): INodeUi | null {
				return this.$store.getters.activeNode;
			},
			runMetadata () {
				if (!this.node || this.workflowExecution === null) {
					return null;
				}

				const runData = this.workflowRunData;

				if (runData === null || !runData.hasOwnProperty(this.node.name)) {
					return null;
				}

				if (runData[this.node.name].length <= this.runIndex) {
					return null;
				}

				const taskData: ITaskData = runData[this.node.name][this.runIndex];
				return {
					executionTime: taskData.executionTime,
					startTime: new Date(taskData.startTime).toLocaleString(),
				};
			},
			dataCount (): number {
				if (this.node === null) {
					return 0;
				}

				const runData: IRunData | null = this.workflowRunData;

				if (runData === null || !runData.hasOwnProperty(this.node.name)) {
					return 0;
				}

				if (runData[this.node.name].length <= this.runIndex) {
					return 0;
				}

				if (runData[this.node.name][this.runIndex].hasOwnProperty('error')) {
					return 1;
				}

				if (!runData[this.node.name][this.runIndex].hasOwnProperty('data') ||
					runData[this.node.name][this.runIndex].data === undefined
				) {
					return 0;
				}

				const inputData = this.getMainInputData(runData[this.node.name][this.runIndex].data!, this.outputIndex);

				return inputData.length;
			},
			dataSizeInMB(): string {
				return (this.dataSize / 1024 / 1000).toLocaleString();
			},
			maxOutputIndex (): number {
				if (this.node === null) {
					return 0;
				}

				const runData: IRunData | null = this.workflowRunData;

				if (runData === null || !runData.hasOwnProperty(this.node.name)) {
					return 0;
				}

				if (runData[this.node.name].length < this.runIndex) {
					return 0;
				}

				if (runData[this.node.name][this.runIndex].data === undefined ||
					runData[this.node.name][this.runIndex].data!.main === undefined
				) {
					return 0;
				}

				return runData[this.node.name][this.runIndex].data!.main.length - 1;
			},
			maxRunIndex (): number {
				if (this.node === null) {
					return 0;
				}

				const runData: IRunData | null = this.workflowRunData;

				if (runData === null || !runData.hasOwnProperty(this.node.name)) {
					return 0;
				}

				if (runData[this.node.name].length) {
					return runData[this.node.name].length - 1;
				}

				return 0;
			},
			jsonData (): IDataObject[] {
				let inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);
				if (inputData.length === 0 || !Array.isArray(inputData)) {
					return [];
				}

				if (this.maxDisplayItems !== null) {
					inputData = inputData.slice(0, this.maxDisplayItems);
				}

				return this.convertToJson(inputData);
			},
			tableData (): ITableData | undefined {
				let inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);
				if (inputData.length === 0) {
					return undefined;
				}

				if (this.maxDisplayItems !== null) {
					inputData = inputData.slice(0,this.maxDisplayItems);
				}

				return this.convertToTable(inputData);
			},
			binaryData (): IBinaryKeyData[] {
				if (this.node === null) {
					return [];
				}

				return this.getBinaryData(this.workflowRunData, this.node.name, this.runIndex, this.outputIndex);
			},
		},
		methods: {
			openSettings() {
				this.$emit('openSettings');
			},
			init() {
				// Reset the selected output index every time another node gets selected
				this.outputIndex = 0;
				this.maxDisplayItems = 25;
				this.refreshDataSize();
				if (this.displayMode === 'binary') {
					this.closeBinaryDataDisplay();
					if (this.binaryData.length === 0) {
						this.displayMode = 'table';
					}
				}
			},
			closeBinaryDataDisplay () {
				this.binaryDataDisplayVisible = false;
				this.binaryDataDisplayData = null;
			},
			convertToJson (inputData: INodeExecutionData[]): IDataObject[] {
				const returnData: IDataObject[] = [];
				inputData.forEach((data) => {
					if (!data.hasOwnProperty('json')) {
						return;
					}
					returnData.push(data.json);
				});

				return returnData;
			},
			convertToTable (inputData: INodeExecutionData[]): ITableData | undefined {
				const tableData: GenericValue[][] = [];
				const tableColumns: string[] = [];
				let leftEntryColumns: string[], entryRows: GenericValue[];
				// Go over all entries
				let entry: IDataObject;
				inputData.forEach((data) => {
					if (!data.hasOwnProperty('json')) {
						return;
					}
					entry = data.json;

					// Go over all keys of entry
					entryRows = [];
					leftEntryColumns = Object.keys(entry);

					// Go over all the already existing column-keys
					tableColumns.forEach((key) => {
						if (entry.hasOwnProperty(key)) {
							// Entry does have key so add its value
							entryRows.push(entry[key]);
							// Remove key so that we know that it got added
							leftEntryColumns.splice(leftEntryColumns.indexOf(key), 1);
						} else {
							// Entry does not have key so add null
							entryRows.push(null);
						}
					});

					// Go over all the columns the entry has but did not exist yet
					leftEntryColumns.forEach((key) => {
						// Add the key for all runs in the future
						tableColumns.push(key);
						// Add the value
						entryRows.push(entry[key]);
					});

					// Add the data of the entry
					tableData.push(entryRows);
				});

				// Make sure that all entry-rows have the same length
				tableData.forEach((entryRows) => {
					if (tableColumns.length > entryRows.length) {
						// Has to less entries so add the missing ones
						entryRows.push.apply(entryRows, new Array(tableColumns.length - entryRows.length));
					}
				});

				return {
					columns: tableColumns,
					data: tableData,
				};
			},
			clearExecutionData () {
				this.$store.commit('setWorkflowExecutionData', null);
				this.updateNodesExecutionIssues();
			},
			dataItemClicked (path: string, data: object | number | string) {
				this.state.value = data;
			},
			displayBinaryData (index: number, key: string) {
				this.binaryDataDisplayVisible = true;

				this.binaryDataDisplayData = {
					node: this.node!.name,
					runIndex: this.runIndex,
					outputIndex: this.outputIndex,
					index,
					key,
				};
			},
			getOutputName (outputIndex: number) {
				if (this.node === null) {
					return outputIndex + 1;
				}

				const nodeType = this.$store.getters.nodeType(this.node.type, this.node.typeVersion) as INodeTypeDescription | null;
				if (!nodeType || !nodeType.outputNames || nodeType.outputNames.length <= outputIndex) {
					return outputIndex + 1;
				}

				return nodeType.outputNames[outputIndex];
			},
			convertPath (path: string): string {
				// TODO: That can for sure be done fancier but for now it works
				const placeholder = '*___~#^#~___*';
				let inBrackets = path.match(/\[(.*?)\]/g);

				if (inBrackets === null) {
					inBrackets = [];
				} else {
					inBrackets = inBrackets.map(item => item.slice(1, -1)).map(item => {
						if (item.startsWith('"') && item.endsWith('"')) {
							return item.slice(1, -1);
						}
						return item;
					});
				}
				const withoutBrackets = path.replace(/\[(.*?)\]/g, placeholder);
				const pathParts = withoutBrackets.split('.');
				const allParts = [] as string[];
				pathParts.forEach(part => {
					let index = part.indexOf(placeholder);
					while(index !== -1) {
						if (index === 0) {
							allParts.push(inBrackets!.shift() as string);
							part = part.substr(placeholder.length);
						} else {
							allParts.push(part.substr(0, index));
							part = part.substr(index);
						}
						index = part.indexOf(placeholder);
					}
					if (part !== '') {
						allParts.push(part);
					}
				});

				return '["' + allParts.join('"]["') + '"]';
			},
			handleCopyClick (commandData: { command: string }) {
				const newPath = this.convertPath(this.state.path);

				let value: string;
				if (commandData.command === 'value') {
					if (typeof this.state.value === 'object') {
						value = JSON.stringify(this.state.value, null, 2);
					} else {
						value = this.state.value.toString();
					}
				} else {
					let startPath = '';
					let path = '';
					if (commandData.command === 'itemPath') {
						const pathParts = newPath.split(']');
						const index = pathParts[0].slice(1);
						path = pathParts.slice(1).join(']');
						startPath = `$item(${index}).$node["${this.node!.name}"].json`;
					} else if (commandData.command === 'parameterPath') {
						path = newPath.split(']').slice(1).join(']');
						startPath = `$node["${this.node!.name}"].json`;
					}
					if (!path.startsWith('[') && !path.startsWith('.') && path) {
						path += '.';
					}
					value = `{{ ${startPath + path} }}`;
				}

				this.copyToClipboard(value);
			},
			refreshDataSize () {
				// Hide by default the data from being displayed
				this.showData = false;

				// Check how much data there is to display
				const inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);

				const jsonItems = inputData.slice(0, this.maxDisplayItems || inputData.length).map(item => item.json);

				this.dataSize = JSON.stringify(jsonItems).length;

				if (this.dataSize < this.MAX_DISPLAY_DATA_SIZE) {
					// Data is reasonable small (< 200kb) so display it directly
					this.showData = true;
				}
			},
		},
		watch: {
			node() {
				this.init();
			},
			jsonData () {
				this.refreshDataSize();
			},
			displayMode (newValue, oldValue) {
				this.closeBinaryDataDisplay();
				this.$externalHooks().run('runData.displayModeChanged', { newValue, oldValue });
				if(this.node) {
					const nodeType = this.node ? this.node.type : '';
					this.$telemetry.track('User changed node output view mode', { old_mode: oldValue, new_mode: newValue, node_type: nodeType, workflow_id: this.$store.getters.workflowId });
				}
			},
			maxRunIndex () {
				this.runIndex = Math.min(this.runIndex, this.maxRunIndex);
			},
		},
	});
</script>

<style lang="scss" module>
.infoIcon {
	color: var(--color-foreground-dark);
}

.center {
	display: flex;
	height: 80%;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	> * {
		max-width: 316px;
		margin-bottom: var(--spacing-2xs);
	}
}

.spinner {
	* {
		color: var(--color-primary);
		min-height: 40px;
		min-width: 40px;
	}

	display: flex;
	justify-content: center;
	margin-bottom: var(--spacing-s);
}

.title {
	text-transform: uppercase;
	color: var(--color-text-light);
	letter-spacing: 3px;
	font-weight: var(--font-weight-bold);
	margin-right: var(--spacing-2xs);
}

.container {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: var(--color-background-light);
	padding: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);
}

.header {
	display: flex;
	align-items: center;
	margin-bottom: var(--spacing-s);

	> *:first-child {
		flex-grow: 1;
	}
}

.dataDisplay {
	position: absolute;
	bottom: 0;
	top: 98px;
	left: 0;
	padding-left: var(--spacing-s);
	right: 0;
	overflow-y: auto;
	line-height: 1.5;
	word-break: normal;
}

.jsonDisplay {
	composes: dataDisplay;
	background-color: var(--color-background-base);
	padding-top: var(--spacing-s);
}

.table {
	border-collapse: collapse;
	text-align: left;
	width: calc(100% - 1px);
	border: var(--border-base);
	font-size: var(--font-size-2xs);

	th {
		padding: var(--spacing-2xs);
		background-color: var(--color-background-base);
		border: var(--border-base);
	}

	td {
		padding: var(--spacing-2xs);
		border: var(--border-base);
	}
}

.emptyCell {
	height: 32px;
}
</style>


<style lang="scss">

.binary-data-row {
	display: inline-flex;
	font-size: var(--font-size-2xs);

	.binary-data-cell {
		display: inline-block;
		width: 300px;
		overflow: hidden;
		background-color: #fff;
		margin-right: var(--spacing-s);
		margin-bottom: var(--spacing-s);
		border-radius: 3px;
		-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05);
		-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05);
		box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05);

		.binary-data-information {
			margin: 1em;

			.binary-data-cell-name {
				color: $--color-primary;
				font-weight: 600;
				font-size: 1.2em;
				padding-bottom: 0.5em;
				margin-bottom: 0.5em;
				border-bottom: 1px solid #ccc;
			}

			.binary-data-show-data-button-wrapper {
				margin-top: 1.5em;
				text-align: center;
			}

			.label {
				padding-top: 0.5em;
				font-weight: bold;
			}
			.value {
				white-space: initial;
				word-wrap: break-word;
			}
		}
	}
}

.binary-data-row-index {
	display: block;
	padding: 1em 1em 0.25em 1em;
	font-size: var(--font-size-2xs);
	margin-bottom: var(--spacing-2xs);

	.binary-data-cell-index {
		display: inline-block;
		width: 30px;
		height: 30px;
		line-height: 30px;
		border-radius: 5px;
		text-align: center;
		padding: 0 0.1em;
		background-color: $--custom-header-background;
		font-weight: 600;
		color: #fff;
	}
}

</style>


<style lang="scss">
.vjs-checkbox {
	position: absolute;
	left: -30px;
	color: #1f2d3d;
	user-select: none;
}

.vjs-checkbox.is-checked .vjs-checkbox__inner {
	background-color: #1890ff;
	border-color: #0076e4
}

.vjs-checkbox.is-checked .vjs-checkbox__inner:after {
	transform: rotate(45deg) scaleY(1)
}

.vjs-checkbox .vjs-checkbox__inner {
	display: inline-block;
	position: relative;
	border: 1px solid #bfcbd9;
	border-radius: 2px;
	vertical-align: middle;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	background-color: #fff;
	z-index: 1;
	cursor: pointer;
	transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46)
}

.vjs-checkbox .vjs-checkbox__inner:after {
	box-sizing: content-box;
	content: "";
	border: 2px solid #fff;
	border-left: 0;
	border-top: 0;
	height: 8px;
	left: 4px;
	position: absolute;
	top: 1px;
	transform: rotate(45deg) scaleY(0);
	width: 4px;
	transition: transform .15s cubic-bezier(.71, -.46, .88, .6) .05s;
	transform-origin: center
}

.vjs-checkbox .vjs-checkbox__original {
	opacity: 0;
	outline: none;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0
}

.vjs-radio {
	position: absolute;
	left: -30px;
	color: #1f2d3d;
	user-select: none
}

.vjs-radio.is-checked .vjs-radio__inner {
	background-color: #1890ff;
	border-color: #0076e4
}

.vjs-radio.is-checked .vjs-radio__inner:after {
	transform: translate(-50%, -50%) scale(1)
}

.vjs-radio .vjs-radio__inner {
	border: 1px solid #bfcbd9;
	border-radius: 100%;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	background-color: #fff;
	position: relative;
	cursor: pointer;
	display: inline-block;
	box-sizing: border-box
}

.vjs-radio .vjs-radio__inner:after {
	width: 4px;
	height: 4px;
	border-radius: 100%;
	background-color: #fff;
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: transform .15s ease-in
}

.vjs-radio .vjs-radio__original {
	opacity: 0;
	outline: none;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0
}

.vjs-tree {
	font-family: Monaco, Menlo, Consolas, Bitstream Vera Sans Mono, monospace;
	font-size: 14px;
	color: #5045A1;
}

.vjs-tree.is-root {
	position: relative;
}

.vjs-tree.is-root.has-selectable-control {
	margin-left: 30px;
}

.vjs-tree.is-mouseover {
	background-color: #e6f7ff;
}

.vjs-tree.is-highlight-selected {
	background-color: #EBEDF3;
}

.vjs-tree .vjs-tree__content {
	padding-left: 1em;
}

.vjs-tree .vjs-tree__content.has-line {
	border-left: 1px dotted #bfcbd9;
}

.vjs-tree .vjs-tree__brackets {
	cursor: pointer;
}

.vjs-tree .vjs-tree__brackets:hover {
	color: #1890ff;
}

.vjs-tree .vjs-comment {
	color: #bfcbd9;
}

.vjs-tree .vjs-value__null {
	color: #F45959;
}

.vjs-tree .vjs-value__boolean,
.vjs-tree .vjs-value__number {
	color: #1d8ce0;
}

.vjs-tree .vjs-value__string {
	color: #5045A1;
}
</style>
