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

.diagnostics-pane {
	height: 200px;
	border-top: 1px solid var(--sl-border);
	:root[data-theme="dark"] & {
		.empty-panel {
			background-color: #282c34;
		}
	}

	@media (prefers-color-scheme: dark) {
		:root[data-theme="auto"] & {
			.empty-panel {
				background-color: #282c34;
			}
		}
	}
}

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

.diagnostics-console {
	overflow: auto;
	font-size: 14px;
}

ul.diagnostics-list {
	line-height: 30px;
	font-size: 14px;
	height: 100%;
	padding: 0;
	overflow: auto;

	:root[data-theme="dark"] & {
		background-color: #282c34;
	}

	@media (prefers-color-scheme: dark) {
		:root[data-theme="auto"] & {
			background-color: #282c34;
		}
	}

	li {
		padding-right: 10px;
		cursor: pointer;
		display: flex;
		white-space: pre;

		picture {
			margin: 7px 10px;
			display: flex;

			&.icon-info {
				fill: var(--sl-color-accent);
			}

			&.icon-error {
				fill: var(--sl-color-red);
			}
		}

		.linecol {
			margin-left: auto;
		}

		&:nth-child(2n) {
			background-color: rgba(0, 0, 0, 0.1);
		}

		&:hover {
			background-color: rgba(0, 0, 0, 0.1);
		}
	}
}
