.navigator {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-width: 1px;
	border-color: #f1f2f4;
	background-color: #e2e5e9;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
	z-index: 1200;
	font-family: Inter, sans-serif;

	@media (prefers-color-scheme: dark) {
		background-color: #16191d;
		border-color: #21262b;
		color: #e2e5e9;
	}

	&__close-btn {
		position: absolute;
		right: 0.25rem;
		top: 0.5rem;
		width: 1.25rem;
		cursor: pointer;
	}

	&__header {
		padding: 0.5rem;
		background-color: #ffffff;
		text-align: center;
		border-bottom-width: 1px;
		border-color: #e2e5e9;
		line-height: 1.25rem;
		font-size: 0.875rem;

		@media (prefers-color-scheme: dark) {
			background-color: #2c333a;
			border-color: #424c57;
		}
	}

	&__tree-container {
		overflow-y: auto;
		padding-bottom: 2.5rem;
		font-size: 0.875rem;
		line-height: 1.25rem;
		max-height: 100%;
	}

	&__tree-container-inner {
		display: inline-block;
		min-width: 100%;
	}
}