/* Stylesheet for <knowwe-page-annotate>. Loaded inside the component's declarative
   shadow DOM, so :host(...) selectors target the element from outside the shadow. */

:host {
	/* JSPWiki/Haddock pins html { font-size: 10px } and body { font-size: 16px }.
	   Use the same 16px baseline; line-height 1.4 keeps the per-line spacing tight. */
	display: block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #1f2328;
	background: #ffffff;
}

table.annotate {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #d0d7de;
	border-radius: 6px;
	overflow: hidden;
}

table.annotate td {
	padding: 3px 10px;
	vertical-align: top;
}

/* Horizontal separator only between meta columns; the content column stays as one block. */
table.annotate tbody tr:not(:last-child) td.version,
table.annotate tbody tr:not(:last-child) td.date,
table.annotate tbody tr:not(:last-child) td.author {
	border-bottom: 1px solid #eaecef;
}

table.annotate tbody tr:hover td {
	background: #fff8c5;
}

td.version {
	color: #57606a;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

td.version a {
	color: #0969da;
	text-decoration: none;
}

td.version a:hover {
	text-decoration: underline;
}

td.date {
	color: #57606a;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

td.author {
	white-space: nowrap;
}

td.text {
	/* Take whatever horizontal space the meta columns leave over. */
	width: 100%;
	border-left: 1px solid #d0d7de;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	white-space: pre;
	overflow-x: auto;
}

@media (prefers-color-scheme: dark) {
	:host(:not([data-theme])) {
		color: #e6edf3;
		background: #0d1117;
	}

	:host(:not([data-theme])) table.annotate {
		border-color: #30363d;
	}

	:host(:not([data-theme])) table.annotate tbody tr:not(:last-child) td.version,
	:host(:not([data-theme])) table.annotate tbody tr:not(:last-child) td.date,
	:host(:not([data-theme])) table.annotate tbody tr:not(:last-child) td.author {
		border-bottom-color: #21262d;
	}

	:host(:not([data-theme])) td.version,
	:host(:not([data-theme])) td.date {
		color: #8b949e;
	}

	:host(:not([data-theme])) td.version a {
		color: #58a6ff;
	}

	:host(:not([data-theme])) td.text {
		border-left-color: #30363d;
	}

	:host(:not([data-theme])) table.annotate tbody tr:hover td {
		background: #2d3139;
	}
}

:host([data-theme="dark"]) {
	color: #e6edf3;
	background: #0d1117;
}

:host([data-theme="dark"]) table.annotate {
	border-color: #30363d;
}

:host([data-theme="dark"]) table.annotate tbody tr:not(:last-child) td.version,
:host([data-theme="dark"]) table.annotate tbody tr:not(:last-child) td.date,
:host([data-theme="dark"]) table.annotate tbody tr:not(:last-child) td.author {
	border-bottom-color: #21262d;
}

:host([data-theme="dark"]) td.version,
:host([data-theme="dark"]) td.date {
	color: #8b949e;
}

:host([data-theme="dark"]) td.version a {
	color: #58a6ff;
}

:host([data-theme="dark"]) td.text {
	border-left-color: #30363d;
}

:host([data-theme="dark"]) table.annotate tbody tr:hover td {
	background: #2d3139;
}