main[data-css="atom_io_devtools"] {
	--fg-color: #ccc;
	--fg-light: #aaa;
	--fg-soft: #888;
	--fg-faint: #777;
	--fg-hint: #4a4a4a;
	--fg-max: #fff;
	--bg-color: #111;
	--bg-accent: #00f;
	--bg-max: #000;
	--bg-tint1: #222;
	--bg-tint2: #333;
	--fg-border: 1px solid var(--fg-color);
	--fg-border-soft: 1px solid var(--fg-soft);
	--fg-border-hint: 1px solid var(--fg-hint);
	@media (prefers-color-scheme: light) {
		--fg-color: #444;
		--fg-light: #777;
		--fg-soft: #888;
		--fg-faint: #999;
		--fg-hint: #ccc;
		--fg-max: #000;
		--bg-color: #ddd;
		--bg-accent: #0ff;
		--bg-max: #fff;
		--bg-tint1: #e3e3e3;
		--bg-tint2: #f3f3f3;
	}
	* {
		box-sizing: border-box;
	}
	& {
		pointer-events: all;
		box-sizing: border-box;
		color: var(--fg-color);
		background-color: var(--bg-color);
		border: 2px solid var(--fg-color);
		position: fixed;
		right: 0;
		bottom: 0;
		height: 100%;
		display: flex;
		flex-flow: column;
		max-height: 800px;
		width: 100%;
		max-width: 500px;
		overflow-y: scroll;
	}
	* {
		font-size: 14px;
		font-family: theia, monospace;
		line-height: 1em;
		color: var(--fg-color);
	}
	> header {
		padding-bottom: 0;
		display: flex;
		justify-content: space-between;
		h1 {
			margin: 2px 4px;
			font-size: 24px;
			font-family: charter, serif;
		}
		nav {
			position: relative;
			display: flex;
			flex-flow: row nowrap;
			margin-top: 4px;
			overflow-x: scroll;
			overflow-y: visible;
			height: 24px;
			button {
				height: 24px;
				cursor: pointer;
				background: none;
				border: none;
				padding: 0px 5px;
				margin-bottom: -2px;
				z-index: 1000;
				&:disabled {
					cursor: default;
					background-color: var(--fg-color);
					color: var(--bg-color);
					border: var(--fg-border);
				}
			}
		}
	}

	> main {
		background: var(--bg-tint1);
		overflow-y: scroll;
		flex-grow: 1;
		display: flex;
		flex-flow: column;
		gap: 0;
		article.index {
			margin-bottom: 0px;
			padding-bottom: 24px;
			border-top: var(--fg-border);
			min-height: calc(100% - 24px);
			display: flex;
			flex-shrink: 0;
			flex-flow: column;
			.node .node {
				border-right: none;
				padding-right: 0;
				background: #ffffff08;
				@media (prefers-color-scheme: light) {
					background: #00000004;
				}
			}
			.index-empty-state {
				width: 100%;
				height: 100%;
				font-style: italic;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.node > .node {
				margin: 0px 0px 0px 9px;
				width: calc(100% - 9px);
				border-left: var(--fg-border-soft);
				&:first-of-type {
					border-top: var(--fg-border-soft);
				}
				&:last-of-type {
					border-bottom: none;
				}
			}
			.node {
				position: relative;
				border-bottom: var(--fg-border-soft);
				overflow: visible;
				width: 100%;
				display: flex;
				flex-flow: column;
				&.transaction_update {
					padding: 0;
				}

				> header {
					width: auto;
					display: flex;
					flex-flow: row;
					justify-content: space-between;
					position: sticky;
					z-index: 999;
					top: 0;
					height: 22px;
					background: var(--bg-tint2);
					border-bottom: none;
					align-items: center;
					overflow: hidden;

					> main {
						height: 100%;
						display: flex;
						flex-flow: row;
						cursor: help;
						align-items: center;
						flex-shrink: 0;
						* {
							height: 100%;
							display: flex;
							align-items: center;
							align-content: center;
							justify-content: center;
						}
						h2 {
							margin: 0;
						}
					}

					> footer {
						height: 16px;
						width: fit-content;
						min-width: 0;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-shrink: 1;
						> button {
							border: none;
							background: none;
							border-left: var(--fg-border-soft);
						}
						> .json_viewer {
							color: var(--fg-light);
							flex-shrink: 1;
							overflow: scroll;
							align-self: center;
							align-items: flex-start;
						}
						> .json_editor,
						> .json_viewer {
							height: 16px;
							min-width: 10px;
							padding-left: 4px;
							padding-right: 2px;
							display: flex;
							flex-flow: row;
							margin-right: 0px;
							overflow-x: scroll;
							align-items: center;
							justify-content: flex-start;
							white-space: pre;
							border-left: var(--fg-border-soft);
							&:focus-within {
								background-color: var(--bg-max);
								outline: 2px solid var(--fg-max);
								* {
									color: var(--fg-max);
								}
							}
							main {
								height: 100%;
							}
							> span {
								padding: 0px 5px;
								z-index: 0;
							}
							input {
								outline: none;
							}
						}
					}

					.detail {
						margin-left: 5px;
						color: #777;
						@media (prefers-color-scheme: light) {
							color: #999;
						}
					}
				}
			}
			section.transaction_log {
				margin-top: 0;
				main {
					display: flex;
					flex-flow: row wrap;
					gap: 0;
					article.transaction_update {
						width: 100%;
						display: flex;
						flex-flow: row;
						align-items: flex-start;
						justify-content: flex-start;
						justify-items: flex-start;
						align-content: flex-start;
						border-left: none;
						border-bottom: none;
						border-top: var(--fg-border);
						header {
							height: 100%;
							padding: 5px;
							display: flex;
							flex-flow: column;
							h4 {
								margin: 0;
								padding: 0;
								font-size: inherit;
							}
						}
						main {
							margin-left: 0;
							display: flex;
							flex-flow: column;
							flex-grow: 1;
							gap: 0px;
							border-left: 1px solid #333;
							section ~ section {
								border-top: 1px solid #333;
							}
							section {
								padding: 5px;
								border-bottom: none;
								margin: 0;
								&.transaction_output {
									border-right: none;
								}
								&.transaction_impact {
									padding: 5px;
								}

								article {
									padding: 3px 6px;
									border-left: var(--fg-border);
									border-right: var(--fg-border);
									&:first-of-type {
										border-top: var(--fg-border);
									}
									.summary {
										white-space: nowrap;
									}
								}
							}
						}
					}
				}
			}

			section.timeline_log {
				header {
					display: flex;
					> main {
						display: flex;
						width: 100%;
						flex-grow: 1;
						.gap {
							flex-grow: 1;
						}
						nav {
							display: flex;
							flex-flow: row nowrap;
							gap: 5px;
						}
					}
				}
				.timeline_update {
					padding: 5px;
					border-left: var(--fg-border);
					h4 {
						margin: 0;
						padding: 0;
						font-size: inherit;
					}
					main {
						margin: 0;
						.node.atom_update {
							border-left: var(--fg-border);
						}
					}
				}
				.you_are_here {
					background: var(--fg-color);
					color: var(--bg-color);
					text-align: center;
				}
			}
		}
	}

	> footer {
		z-index: 10000;
		display: flex;
		justify-content: flex-end;
		button {
			cursor: pointer;
			background: none;
			border: none;
			padding: none;
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}

	.json_editor {
		display: flex;
		flex-flow: column;
		> header {
			width: 100%;
			display: flex;
			flex-flow: row;
			align-items: center;
			overflow: hidden;
			white-space: nowrap;
			justify-content: space-between;
			&:has(> main > button.carat) {
				height: 21px;
			}
			> main {
				display: flex;
				flex-flow: row;
				align-items: center;
				align-self: center;
				flex-shrink: 1;
				overflow-x: hidden;
				padding-right: 2px;
				> .json_viewer {
					flex-shrink: 1;
					overflow-x: scroll;
					height: 21px;
					font-size: 14px;
					display: flex;
					align-items: center;
					margin-left: 0px;
					color: var(--fg-soft);
				}
				> button {
					padding: 0;
					&.carat {
						line-height: 0.5em;
						font-size: 14px;
					}
				}
			}
		}
		> .json_editor_array,
		> .json_editor_object {
			width: 100%;
			flex-grow: 1;
		}
		input {
			font-family: theia, monospace;
			background: none;
			&:disabled {
				border: none;
			}
		}
		input,
		select {
			&:focus-within {
				outline: 2px solid var(--fg-max);
				background: var(--bg-max);
				color: var(--fg-max);
			}
		}

		button:disabled {
			cursor: default;
			> span.json_editor_icon {
				color: var(--fg-hint);
			}
			&:hover {
				background: none;
			}
		}
		input::selection {
			background: var(--bg-accent);
		}

		button {
			background: none;
			color: #777;
			border: none;
			font-family: theia, monospace;
			font-size: 14px;
			height: 21px;
			min-width: 21px;
			margin: none;
			padding: 4px;
			padding-bottom: 6px;
			cursor: pointer;
			&:hover,
			&:focus-within {
				background-color: var(--fg-faint);
				&,
				> * {
					color: var(--bg-color);
				}
			}
			&:active {
				background: var(--fg-color);
				&,
				> * {
					color: var(--bg-color);
				}
			}
		}
		select {
			font-family: theia, monospace;
			font-size: 14px;
			background: none;
			border: none;
			color: #777;
			@media (prefers-color-scheme: light) {
				color: #999;
			}
		}
		.json_editor_unofficial {
			background-color: #777;
			button {
				color: #333;
			}
		}
		.json_editor_missing {
			background-color: #f055;
		}
		.json_editor_key {
			padding-right: 0px;
			&::after {
				content: ":";
				color: var(--fg-soft);
			}
			input {
				color: var(--fg-color);
			}
		}
		.json_editor_object,
		.json_editor_array {
			border-left: var(--fg-border-soft);
			margin-left: 9px;
			width: calc(100% - 9px);
			> footer {
				display: flex;
				flex-flow: row;
				justify-content: flex-start;
				justify-items: flex-start;
				height: 21px;
				align-items: baseline;
				position: relative;
			}
			.json_editor_properties,
			.json_editor_elements {
				border-top: var(--fg-border-soft);
				.json_editor_property,
				.json_editor_element {
					display: flex;
					border-bottom: var(--fg-border-soft);
					margin-bottom: 0;
					min-height: 21px;
					> header {
						> main {
							> span {
								input {
									min-width: 10px;
								}
								> * {
									border: var(--fg-border-hint);
								}
							}
						}
					}
				}
				&.readonly {
					.json_editor_property,
					.json_editor_element {
						&:last-of-type {
							border-bottom: none;
						}
						span > * {
							border: 1px solid transparent;
						}
					}
				}
			}
		}
	}

	.json_editor_icon {
		color: var(--fg-soft);
	}

	button.carat {
		border: none;
		cursor: pointer;
		background: none;
		> .json_editor_icon {
			line-height: 4px;
		}
		&.open {
			transform: rotate(90deg);
		}
		&:disabled {
			> .json_editor_icon {
				cursor: default;
				color: var(--fg-hint);
			}
		}
	}
}