/* Mermaid wrapper */
.ck-mermaid__wrapper {
	display: flex;
	justify-content: center;
}

/* Editing
 Assigned to textarea
 */
.ck-mermaid__wrapper .ck-mermaid__editing-view {
	padding: 16px; /* just like pre element */
	background-color: hsla(0, 0%, 78%, 0.3); /* just like pre element */
	min-height: 200px;
	border: 0;
	resize: vertical;
	font-size: 12px; /* just like pre element */
	outline: 0; /* just like pre element */
}

/* Preview */
.ck-mermaid__preview {
	display: flex;
	justify-content: center;
}

/* Preview error state */
[id^="dmermaid-"] {
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: center;
}

[id^="dmermaid-"] svg {
	display: block;
	width: 60%;
	height: auto;
}

/* Source mode */
.ck-mermaid__source-mode .ck-mermaid__editing-view {
	width: 100%;
}

.ck-mermaid__source-mode .ck-mermaid__preview {
	display: none;
}

/* Split mode */
.ck-mermaid__split-mode .ck-mermaid__editing-view {
	width: 50%;
}

.ck-mermaid__split-mode .ck-mermaid__preview {
	width: 50%;
}

/* Preview mode */
.ck-mermaid__preview-mode .ck-mermaid__editing-view {
	display: none;
}