/* 
*	The following components are to be taken into consideration when working with z-index
*
*	Header:
*		- Label of the ChangeModelButton in mobile view
*	Sidebar:
*		- Sidebar itself
*		- Modals (If there are some)
*	Chat:
*		- Notifications
*		- Mobile chat buttons
*		- Code language and copy button of messages
*		- Modals (Feedback)
*/

:root {
	/* 
	 * The breakpoints might not be used
	 * Please keep them for documentation
	 */
	--breakpoint-small: 385px; /* (384px - 385px) */
	--breakpoint-medium: 640px; /* (639px - 640px) */
	--breakpoint-large: 1040px; /* (1039px - 1040px) */

	--header-height: 72px;

	@media (max-width: 1039px) {
		--header-height: 60px;
	}
}

a {
	color: var(--telekom-color-text-and-icon-link-standard);
}

body {
	margin: 0 !important;
	overscroll-behavior: none;
	height: 95vh !important;
	background-color: var(--telekom-color-background-canvas-subtle);
	color: var(--telekom-color-text-and-icon-standard);
}

.onlyScreenReader {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* hljs default theme */
.hljs {
	.hljs-comment,
	.hljs-quote {
		color: #d4d0ab;
	}

	.hljs-variable,
	.hljs-template-variable,
	.hljs-tag,
	.hljs-name,
	.hljs-selector-id,
	.hljs-selector-class,
	.hljs-regexp,
	.hljs-deletion {
		color: #ffa07a;
	}

	.hljs-number,
	.hljs-built_in,
	.hljs-builtin-name,
	.hljs-literal,
	.hljs-type,
	.hljs-params,
	.hljs-meta,
	.hljs-link {
		color: #f5ab35;
	}

	.hljs-attribute {
		color: #ffd700;
	}

	.hljs-string,
	.hljs-symbol,
	.hljs-bullet,
	.hljs-addition {
		color: #abe338;
	}

	.hljs-title,
	.hljs-section {
		color: #00e0e0;
	}

	.hljs-keyword,
	.hljs-selector-tag {
		color: #dcc6e0;
	}

	.hljs-emphasis {
		font-style: italic;
	}

	.hljs-strong {
		font-weight: bold;
	}

	@media screen and (-ms-high-contrast: active) {
		.hljs-addition,
		.hljs-attribute,
		.hljs-built_in,
		.hljs-builtin-name,
		.hljs-bullet,
		.hljs-comment,
		.hljs-link,
		.hljs-literal,
		.hljs-meta,
		.hljs-number,
		.hljs-params,
		.hljs-string,
		.hljs-symbol,
		.hljs-type,
		.hljs-quote {
			color: highlight;
		}

		.hljs-keyword,
		.hljs-selector-tag {
			font-weight: bold;
		}
	}
}