
[data-component="ac-json"] {
	overflow-x: scroll;
	width: 100%;
	font-size: 12px !important;

	ul {
		font-size: 13px !important;
	}

	> div > div > ul {
		margin-left: 0;

		> ul > li.indent {
			margin-left: 0;
			padding-left: 0;
		}
	}

	&::-webkit-scrollbar {
		display: none;
	}

	.arrow {
		width: auto;
		height: auto;
		left: inherit;
		bottom: inherit;
	}

	.root {
		max-width: 100px;
		white-space: nowrap;
		margin-bottom: 5px;

		> .container {
			padding-left: 10px;

			.arrow {
				margin-left: -6px;
			}
		}
	}

	ul .root {
		display: none;
	}

	ul {
		li {
			&.indent {
				white-space: nowrap;
				margin-bottom: 0;

				ul {
					margin-top: 4px;
					margin-bottom: 4px;
				}
			}

			span.container {
				display: none;

				& + span.property {
					color: var(--ac-primary-color);
					cursor: pointer !important;
					font-style: italic;

					&:hover {
						color: var(--ac-primary-color-hover);
					}
				}

				& ~ span.operator {
					display: none;
				}
			}
		}
	}

}