body {
	font-family: sans-serif;
}

.astItem {
	&.hasBlockScope {
		background: linear-gradient(rgb(231, 225, 211), transparent 64px);
	}

	&.hasFunctionScope {
		background: linear-gradient(rgb(221, 211, 231), transparent 64px);
	}

	.arrow, .type {
		cursor: default;
		user-select: none;
		-webkit-user-select: none;
		-mozilla-user-select: none;
	}

	.type {
		font-weight: bold;
		color: rgb(43, 29, 130);

		& > .preview {
			font-weight: normal;
			margin-left: 8px;
			margin-right: 8px;
			color: rgb(102, 20, 2);
		}
	}

	.scopeId {
		display: inline-block;
		font-weight: bold;
		font-size: 13px;
		margin-left: 5px;
		padding: 1px 4px;
		background-color: rgb(211, 231, 221);
		border: 1px solid rgb(76, 161, 117);
		border-radius: 5px;
	}

	.attributes, .children, .childSequences {
		margin-left: 20px;
	}

	.children, .childSequences {
		.child {
			& > .name {
				font-weight: bold;
				border-bottom: 1px solid;
			}

			.items {
				padding-left: 2px;
				border-left: 1px solid;
			}
		}
	}

	.childSequences > .child {
		// $lineColor: rgb(12, 101, 14);
		$lineColor: rgb(69, 3, 3);

		& > .name {
			border-bottom-color: $lineColor;

			&:after {
				margin-left: 5px;
				font-size: 14px;
				color: $lineColor;
				content: "(array)"
			}
		}

		& > .items {
			border-left-color: $lineColor;
		}
	}

	.children > .child {
		$lineColor: rgb(19, 40, 144);

		& > .name {
			border-bottom-color: $lineColor;
		}

		& > .items {
			border-left-color: $lineColor;
		}
	}

	.attributes {
		font-size: 14px;

		.attribute {
			display: inline-block;

			&:not(:last-child):after {
				content: ",";
				margin-right: 8px;
			}

			.name {
				font-weight: bold;
				margin-right: 5px;

				&:after {
					content: ":";
				}
			}

			.value {
				background-color: rgb(242, 242, 242);
				padding: 0px 3px;
				border: 1px solid silver;
				font-family: "monospace";

				.boolean {
					color: rgb(62, 0, 41);
				}

				.number {
					color: rgb(68, 18, 0)
				}

				.string {
					color: rgb(19, 46, 0);

					&:before, &:after {
						content: "\"";
					}
				}

				.null {
					color: gray;
				}
			}
		}
	}
}