@import "../../styles/_variables";
@import "../../styles/_mixins";

.results-pane {
	border-left: 1px solid var(--sl-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.results-tabs {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.mermaid {
	display: flex;
	overflow: auto;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.1);
}

.collapsible-container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0px;
	height: 0;

	&.collapsed {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: content;
		height: auto;
	}
}

.collapsible-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: auto;
}

.diff-hint {
	margin-left: auto;
	opacity: 0.8;

	.insertions {
		color: green;
	}

	.deletions {
		color: red;
	}

	.error {
		color: red;
		font-weight: bold;
	}
}

.cm-theme-light,
.cm-theme-dark {
	height: 100%;
	overflow: auto;
}

.cm-editor {
	height: 100%;
}

.cm-gutters {
	:root[data-theme="dark"] & {
		background-color: #2b313d;
		border-right: 1px solid #313744;
	}

	@media (prefers-color-scheme: dark) {
		:root[data-theme="auto"] & {
			background-color: #2b313d;
			border-right: 1px solid #313744;
		}
	}
}

.cm-focused {
	outline: none !important;
}
