.swarnam-root {
	--swarnam-html-color: #e34c26;
	--swarnam-css-color: #2965f1;
	--swarnam-js-color: #f0db4f;
	--swarnam-box-padding: var(--size-4-3) var(--size-4-4);
	--swarnam-border-color: var(--divider-color);
	--swarnam-border-radius: var(--code-radius);
	--swarnam-source-font: var(--font-monospace);
	--swarnam-source-font-size: var(--code-size);

	display: flex;
	align-items: stretch;
	width: 100%;
}

.swarnam-root.error {
	display: block;
	padding: var(--swarnam-box-padding);
	background-color: var(--code-background);
	text-align: center;

	.icon {
		font-family: "Apple Emoji Color", sans-serif;
		font-size: 1.5em;
	}
}

.swarnam-source-root {
	flex: 1 1 0;
	overflow-x: scroll;
	display: flex;
	align-items: stretch;
	flex-direction: column;
}

.swarnam-preview {
	flex: 1 1 0;
	border: 1px solid var(--swarnam-border-color);
	border-left: 0;
	border-top-right-radius: var(--swarnam-border-radius);
	border-bottom-right-radius: var(--swarnam-border-radius);
	padding: var(--swarnam-box-padding);
}

.swarnam-source-container {
	position: relative;
	flex: 1 1 0;

	& + & {
		border-top: 1px solid var(--swarnam-border-color);
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
}

.markdown-rendered .swarnam-source {
	height: 100%;
	margin: 0;
	font-family: var(--swarnam-source-font);
	font-size: var(--swarnam-source-font-size);
	white-space: pre;
}

.swarnam-badge {
	position: absolute;
	top: calc(var(--size-4-3) / 1.5);
	right: calc(var(--size-4-3) / 1.5);
	font-size: 0.65em;
}

.swarnam-html-badge {
	color: var(--swarnam-html-color);
}

.swarnam-css-badge {
	color: var(--swarnam-css-color);
}

.swarnam-js-badge {
	color: var(--swarnam-js-color);
}