.dialog {
	--primary: #2A2E37;
	--border: black;
	--faded: #a0a1a5;
	--disabled: #888;
	--header-background: #161616;
	--header-foreground: white;
	--list-active-selection-background: rgb(0, 120, 160);
	--list-active-selection-foreground: white;
	--list-hover-background: rgb(36, 39, 46);
	font-family: inherit;
	box-shadow: 0 18px 80px 10px rgba(0, 0, 0, 0.1);
	background-color: var(--primary);
	display: flex;
	flex-direction: column;
	user-select: none;
	overflow: hidden;
	border-radius: 5px;

	.monaco-tl-twistie {
		display: none;
	}

	.title {
		background-color: var(--header-background);
		color: var(--header-foreground);
		padding: 1px;
		font-size: 11px;
		font-weight: normal;
		text-transform: uppercase;
		white-space: nowrap;
		padding: 5px 10px;
	}

	.nav {
		display: flex;
		flex-direction: row;
		padding: 4px;
		border-bottom: 1px solid var(--border);
	}

	.path {
		display: flex;
		flex-direction: row;

		.path-part {
			padding: 5px;
			border-radius: 3px;
			font-size: 1.02em;
			cursor: pointer;

			&:not(:first-child) {
				margin-left: 5px;
			}

			&.active {
				font-weight: bold;
				color: var(--list-active-selection-foreground);
			}
		}
	}

	.dialog-grid {
		display: grid;
		grid-template-columns: 2fr 0.2fr 0.8fr;
	}

	.headings {
		padding: 8px;
		font-size: 12px;
	}

	.file-area {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.dialog-entry {
			cursor: pointer;
			font-size: 1.02em;
			padding: 0px;
			padding-left: 8px;
			padding-right: 8px;

			.dialog-entry-info {
				display: flex;
				flex-direction: row;
			}

			.dialog-entry-icon {
				width: 16px;
				height: 19px;
				margin-right: 5px;
			}

			&:hover {
				background-color: var(--list-hover-background);
			}

			&.active {
				background-color: var(--list-active-selection-background);
				color: var(--list-active-selection-foreground);
			}

			&.disabled, &.disabled:hover {
				background-color: var(--primary);
				color: var(--disabled);
				cursor: initial;
			}
		}
	}

	.buttons {
		display: flex;
		flex-direction: row;
		padding: 10px;
		position: relative;
		background: var(--primary);
		border-top: 1px solid var(--border);

		button:first-child {
			margin-left: auto;
			margin-right: 10px;
		}

		button {
			background: transparent;
			outline: none;
			border: 0;
			color: var(--faded);
			padding: 10px;
			padding-left: 18px;
			padding-right: 18px;
			transition: 150ms background ease, 150ms color ease;
			cursor: pointer;
			border-radius: 5px;

			&:hover {
				background: var(--titlebar);
				color: white;
			}
		}

		button[disabled], button[disabled]:hover {
			color: var(--disabled);
			cursor: initial;
		}
	}
}

.monaco-shell .monaco-tree.focused.no-focused-item:focus:before, .monaco-shell .monaco-list:not(.element-focused):focus:before {
	display: none;
}