:root {
	--prism-background: #f3f4f6; /* Tailwind Gray 100 */
	--prism-foreground: #111827; /* Tailwind Gray 900 */
	--prism-comment: #6b7280;    /* Tailwind Gray 500 */
	--prism-operator: #b45309;   /* Tailwind Amber 700 */
	--prism-function: #be185d;   /* Tailwind Pink 700 */
	--prism-keyword: #047857;    /* Tailwind Emerald 700 */
	--prism-tag: #1d4ed8;        /* Tailwind Blue 700 */
	--prism-string: #6d28d9;     /* Tailwind Violet 600 */
}

code, samp, kbd, var {
  font-family: var(--font_mono);
  padding: 0.1em 0.3em;
  font-variation-settings: "MONO" 1;
}

code, samp {
  background-color: var(--color_background--element);
	font-weight: 500;
}

var {
  font-style: italic;
  font-weight: bold;
}

kbd {
  background-color: var(--color_text--default);
  color: var(--color_background--surface);
  border-radius: 5px;
}

pre:has(code) {
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;

  border-radius: 0.5em;
  background-color: var(--prism-background);
  padding: var(--space_flow);
}

pre code,
pre samp {
  display: block;
  background-color: var(--prism-background);
  color: var(--prism-foreground);
	font-size: var(--font_size--small);
	line-height: 1.5;
  padding: 0;
}

pre.language-txt,
pre.language-css,
pre.language-scss,
pre.language-html,
pre.language-js,
pre.language-vue,
pre.language-md,
pre.language-njk,
pre.language-json,
pre.language-bash,
pre.language-shell,
pre.language-php,
pre.language-yaml,
pre.language-yml,
pre.language-ts {
  position: relative;
}

pre.language-txt::before,
pre.language-css::before,
pre.language-scss::before,
pre.language-html::before,
pre.language-js::before,
pre.language-vue::before,
pre.language-md::before,
pre.language-njk::before,
pre.language-json::before,
pre.language-bash::before,
pre.language-shell::before,
pre.language-php::before,
pre.language-yaml::before,
pre.language-yml::before,
pre.language-ts::before {
  position: absolute;
  top: 0.5em;
  right: 1em;
  font-size: var(--font_size--small);
	line-height: var(--font_height--small);
  color: var(--prism-foreground);
  font-weight: bold;
}

pre.language-txt::before { content: "TXT"; }
pre.language-css::before { content: "CSS"; }
pre.language-scss::before { content: "SCSS"; }
pre.language-html::before { content: "HTML"; }
pre.language-js::before { content: "JS"; }
pre.language-ts::before { content: "TS"; }
pre.language-vue::before { content: "VUE"; }
pre.language-md::before { content: "MD"; }
pre.language-njk::before { content: "NJK"; }
pre.language-json::before { content: "JSON"; }
pre.language-bash::before { content: "BASH"; }
pre.language-shell::before { content: "SHELL"; }
pre.language-php::before { content: "PHP"; }
pre.language-yaml::before,
pre.language-yml::before { content: "YAML"; }

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

.token.class-name,
.token.function {
	color: var(--prism-function)
}

.token.boolean,
.token.constant,
.token.deleted,
.token.number,
.token.property,
.token.symbol,
.token.tag {
	color: var(--prism-tag);
}

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog,
.token.punctuation {
	color: var(--prism-comment);
}

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

.token.atrule,
.token.attr-value,
.token.keyword {
	color: var(--prism-keyword);
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.string.url {
  text-decoration: underline;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  font-style: italic;
}