/* Code block: colours and look for code examples.
   Change the colours with the variables below. */

.kodeblok {
	--kb-bg: #f6f8fa;
	--kb-top-bg: #eaeef2;
	--kb-border: #d0d7de;
	--kb-text: #1f2328;
	--kb-muted: #57606a;
	--kb-comment: #5c6773;
	--kb-keyword: #a8470a;
	--kb-builtin: #0b7a6f;
	--kb-type: #7a3e9d;
	--kb-number: #1d4ed8;
	--kb-string: #17692f;
	--kb-constant: #b3236b;
	--kb-ok: #17692f;
	--kb-error: #a40e26;

	/* Title (data-title): fixed size, not affected by the Size buttons. */
	--kb-title-font: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--kb-title-size: 20px;
	--kb-title-weight: 600;
	--kb-title-color: var(--kb-text);

	position: relative;
	margin: 1.2em 0;
	border: 1px solid var(--kb-border);
	border-radius: 8px;
	background: var(--kb-bg);
	color: var(--kb-text);
	overflow: hidden;
	text-align: left;
}

.kodeblok__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 12px;
	padding: 6px 8px 6px 14px;
	background: var(--kb-top-bg);
	border-bottom: 1px solid var(--kb-border);
}

.kodeblok__titel {
	flex: 1 1 8rem;
	min-width: 0;
	font-family: var(--kb-title-font);
	font-size: var(--kb-title-size);
	font-weight: var(--kb-title-weight);
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--kb-title-color);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kodeblok__knapper {
	display: flex;
	flex: none;
	gap: 6px;
	margin-left: auto;
}

.kodeblok .kodeblok__knap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	margin: 0;
	padding: 5px 12px;
	border: 1px solid var(--kb-border);
	border-radius: 6px;
	background: #fff;
	color: var(--kb-text);
	font: 600 0.85rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.kodeblok .kodeblok__knap:hover {
	background: #f3f4f6;
	border-color: #afb8c1;
	color: var(--kb-text);
}

/* Size buttons at their limit: dimmed, but still focusable. */
.kodeblok .kodeblok__knap[aria-disabled="true"],
.kodeblok .kodeblok__knap[aria-disabled="true"]:hover {
	background: #fff;
	border-color: var(--kb-border);
	opacity: 0.45;
	cursor: default;
}

.kodeblok .kodeblok__knap:focus-visible,
.kodeblok .kodeblok__pre:focus-visible {
	outline: 2px solid #0969da;
	outline-offset: 2px;
}

.kodeblok .kodeblok__knap--ok,
.kodeblok .kodeblok__knap--ok:hover {
	border-color: var(--kb-ok);
	color: var(--kb-ok);
}

.kodeblok .kodeblok__knap--fejl,
.kodeblok .kodeblok__knap--fejl:hover {
	border-color: var(--kb-error);
	color: var(--kb-error);
}

.kodeblok .kodeblok__pre {
	display: block;
	margin: 0;
	padding: 14px 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--kb-text);
	/* The size is set per block by the Size - / Size + buttons (see kodeblok.js). */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: var(--kodeblok-size, 1.1rem);
	line-height: 1.55;
	tab-size: 2;
	white-space: pre;
	overflow: auto;
	max-width: 100%;
}

.kodeblok .kodeblok__pre code {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	white-space: inherit;
	text-shadow: none;
}

/* Hidden status message for screen readers. */
.kodeblok__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Colours for the individual parts of the code. */
.kodeblok .token.comment { color: var(--kb-comment); font-style: italic; }
.kodeblok .token.keyword,
.kodeblok .token.boolean { color: var(--kb-keyword); font-weight: 600; }
.kodeblok .token.builtin { color: var(--kb-builtin); }
.kodeblok .token.class-name { color: var(--kb-type); }
.kodeblok .token.number { color: var(--kb-number); }
.kodeblok .token.string,
.kodeblok .token.char { color: var(--kb-string); }
.kodeblok .token.constant { color: var(--kb-constant); }
.kodeblok .token.operator,
.kodeblok .token.punctuation { color: var(--kb-muted); }
.kodeblok .token.annotation,
.kodeblok .token.decorator { color: var(--kb-type); }

/* HTML */
.kodeblok .token.tag { color: var(--kb-keyword); }
.kodeblok .token.attr-name { color: var(--kb-builtin); }
.kodeblok .token.attr-value,
.kodeblok .token.attr-value .token.punctuation { color: var(--kb-string); }
.kodeblok .token.doctype,
.kodeblok .token.prolog,
.kodeblok .token.cdata { color: var(--kb-comment); }
.kodeblok .token.entity,
.kodeblok .token.symbol { color: var(--kb-constant); }

/* CSS */
.kodeblok .token.selector,
.kodeblok .token.atrule,
.kodeblok .token.rule,
.kodeblok .token.important { color: var(--kb-keyword); }
.kodeblok .token.property { color: var(--kb-builtin); }
.kodeblok .token.url { color: var(--kb-string); }

/* JavaScript and Python */
.kodeblok .token.regex,
.kodeblok .token.template-string,
.kodeblok .token.template-punctuation,
.kodeblok .token.triple-quoted-string { color: var(--kb-string); }
.kodeblok .token.interpolation-punctuation,
.kodeblok .token.string-interpolation .token.interpolation-punctuation { color: var(--kb-keyword); }

/* Function names are coloured in these languages (in Processing and Java only built-ins are). */
.kodeblok code.language-javascript .token.function,
.kodeblok code.language-js .token.function,
.kodeblok code.language-python .token.function,
.kodeblok code.language-py .token.function,
.kodeblok code.language-css .token.function { color: var(--kb-builtin); }

@media print {
	.kodeblok__knap { display: none; }
}

/* Inline code: `word` in a Text Editor widget (and a plain <code> tag typed in its Text tab). Change the look with the variables. */
.kodeblok-inline,
.elementor-widget-text-editor code {
	--kb-inline-bg: #eaeef2;
	--kb-inline-color: #1f2328;
	--kb-inline-border: #d0d7de;
	padding: 0.1em 0.4em;
	border: 1px solid var(--kb-inline-border);
	border-radius: 4px;
	background: var(--kb-inline-bg);
	color: var(--kb-inline-color);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.9em;
	font-weight: 400;
	font-style: normal;
	line-height: 1.3;
	/* inline-block keeps the whole snippet together: it moves to the next line as one piece.
	   Only a snippet wider than the whole text column is broken inside itself. */
	display: inline-block;
	max-width: 100%;
	vertical-align: baseline;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Highlight: ==text== in a Text Editor widget (and a plain <mark> tag typed in its Text tab). */
.kodeblok-mark,
.elementor-widget-text-editor mark {
	--kb-mark-bg: #fff059;
	--kb-mark-color: inherit;
	padding: 0.05em 0.2em;
	border-radius: 3px;
	background: var(--kb-mark-bg);
	color: var(--kb-mark-color);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* A highlight that contains inline code (`word`) is made taller, so the yellow surrounds the code too. */
.kodeblok-mark:has(code),
.elementor-widget-text-editor mark:has(code) {
	padding: 0.3em 0.25em 0.3em;
}

/* Highlighted code inside a code block (§ … § around the code). No padding: it would shift the columns. */
.kodeblok .kodeblok__pre .kodeblok-mark {
	padding: 0;
	border-radius: 0;
	background: var(--kb-code-mark-bg, #fff059);
	color: inherit;
}

/* Line numbers (data-linenumbers="true"). A separate column that is not selectable and not copied. */
.kodeblok {
	--kb-linenr-color: #7a828b;
	--kb-linenr-border: #d0d7de;
}
.kodeblok .kodeblok__pre--linjenr {
	padding-left: 0;
}
.kodeblok .kodeblok__linjenr {
	display: inline-block;
	vertical-align: top;
	position: sticky;
	left: 0;
	z-index: 1;
	box-sizing: content-box;
	min-width: 1.4em;
	margin-right: 14px;
	padding: 0 12px 0 16px;
	background: var(--kb-bg);
	border-right: 1px solid var(--kb-linenr-border);
	color: var(--kb-linenr-color);
	text-align: right;
	font-variant-numeric: tabular-nums;
	-webkit-user-select: none;
	user-select: none;
}
.kodeblok .kodeblok__pre--linjenr code {
	display: inline-block;
	vertical-align: top;
}