.previewPanel {
	z-index: 1400;
	height: 100%;

	h1 {
		margin: 0;
	}
}

:global(#overlayPanelFullScreen) {
	position: absolute;
	right: 0;
	top: 0;
	left: 400px;
	bottom: 0;
	z-index: 1400;
	& > div {
		height: 100%;
	}
}

.topRow {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	padding: 10px;
}

.controls {
	z-index: 1300;
	justify-content: flex-end;

	button {
		cursor: pointer;
		&:hover svg {
			fill: #999999;
		}
	}
}

.previewPanelContent {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.panelContent {
	height: 100%;
	display: flex;
	flex-direction: column;
}

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

	& > div,
	& > div > div {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
	}

	.loading {
		align-items: center;
		justify-content: center;
	}
}

.noResults {
	color: white;
	margin: auto;
	position: relative;
	text-align: center;
}

.previewLoading {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	justify-items: center;
	height: 100%;
}

button.error {
	border-color: #dc4040;
	color: #dc4040;

	svg {
		fill: #dc4040;
		margin-left: 4px;
		margin-top: -1px;
	}

	&:hover {
		background-color: #503636;
		border-color: #dc4040;
	}
}
