/*
-----------------------------------------------
	syntax-highlighting [prism]
-----------------------------------------------
*/

/*	colors --------------------------------- */
pre[class*='language-'] {
	--background: var(--back-light);
	--base:       #545454;
	--comment:    #696969;
	--keyword:    #007f8a;
	--function:   #bb5525;
	--string:     #856e3d;
	--number:     #008000;
	--tags:       var(--function);
	--important:  var(--string);
}

/*	type-base ------------------------------ */
code[class*='language-'],
pre[class*='language-'] {
	background: none;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	font: 300 var(--code-fs)/1.7 var(--font-mono);
	color: var(--base);
	tab-size: 2;
	-moz-tab-size: 2;
	-webkit-hyphens: none;
	hyphens: none;
}

/*	code-blocks ---------------------------- */
pre[class*='language-'] {
	overflow: auto;
	padding: 1.5rem 2rem;
	margin: .8rem 0 2.4rem;
	/* max-width: var(--code-w); */
	border-radius: var(--border-r);
	box-shadow: 1px 1px 1px rgba(68, 68, 68, .12) inset;
}

:not(pre) > code[class*='language-'],
pre[class*='language-'] {
	background: var(--background);
}

/*	tokens --------------------------------- */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata       { color: var(--comment) }

.token.punctuation { color: var(--base) }

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted      { color: var(--tags) }

.token.boolean,
.token.number       { color: var(--number) }

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted      { color: var(--string) }

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable       { color: var(--base) }

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name     { color: var(--function) }

.token.keyword        { color: var(--keyword) }

.token.regex,
.token.important      { color: var(--important) }

.token.important,
.token.bold   { font-weight: bold }
.token.italic { font-style: italic }
.token.entity { cursor: help }