/**
 * Combined Prism.js themes for light and dark modes
 * Light theme by default, dark theme when .dark class is present on html
 */

/* Light theme (default) */
code[class*="language-"],
pre[class*="language-"] {
	color: #393A34;
	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
	direction: ltr;
	text-align: left;
	white-space: pre-wrap;
	word-spacing: normal;
	word-break: normal;
	font-size: .9em;
	line-height: 1.2em;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

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

pre > code[class*="language-"] {
	font-size: 1em;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	background: #C1DEF1;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	background: #C1DEF1;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border: 1px solid #dddddd;
	background-color: white;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .2em;
	padding-top: 1px;
	padding-bottom: 1px;
	background: #f8f8f8;
	border: 1px solid #dddddd;
}

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

.token.namespace {
	opacity: .7;
}

.token.string {
	color: #A31515;
}

.token.punctuation,
.token.operator {
	color: #393A34; /* no highlight */
}

.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.inserted {
	color: #36acaa;
}

.token.atrule,
.token.keyword,
.token.attr-value,
.language-autohotkey .token.selector,
.language-json .token.boolean,
.language-json .token.number,
code[class*="language-css"] {
	color: #0000ff;
}

.token.function {
	color: #393A34;
}

.token.deleted,
.language-autohotkey .token.tag {
	color: #9a050f;
}

.token.selector,
.language-autohotkey .token.keyword {
	color: #00009f;
}

.token.important {
	color: #e90;
}

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

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

.token.class-name,
.language-json .token.property {
	color: #2B91AF;
}

.token.tag,
.token.selector {
	color: #800000;
}

.token.attr-name,
.token.property,
.token.regex,
.token.entity {
	color: #ff0000;
}

.token.directive.tag .tag {
	background: #ffff00;
	color: #393A34;
}

.line-numbers.line-numbers .line-numbers-rows {
	border-right-color: #a5a5a5;
}

.line-numbers .line-numbers-rows > span:before {
	color: #2B91AF;
}

.line-highlight.line-highlight {
	background: rgba(193, 222, 241, 0.2);
	background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
	background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
}

/* Dark theme (when .dark class is present on html) */
.dark pre[class*="language-"],
.dark code[class*="language-"] {
	color: #d4d4d4;
	font-size: 13px;
	text-shadow: none;
	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
	direction: ltr;
	text-align: left;
	white-space: pre-wrap;
	word-spacing: normal;
	word-break: normal;
	line-height: 1.5;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

.dark pre[class*="language-"]::selection,
.dark code[class*="language-"]::selection,
.dark pre[class*="language-"] *::selection,
.dark code[class*="language-"] *::selection {
	text-shadow: none;
	background: #264F78;
}

.dark pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	background: #1e1e1e;
	border: 1px solid #444;
}

.dark :not(pre) > code[class*="language-"] {
	padding: .1em .3em;
	border-radius: .3em;
	color: #db4c69;
	background: #1e1e1e;
	border: 1px solid #444;
}

.dark .namespace {
	opacity: .7;
}

.dark .token.doctype .token.doctype-tag {
	color: #569CD6;
}

.dark .token.doctype .token.name {
	color: #9cdcfe;
}

.dark .token.comment,
.dark .token.prolog {
	color: #6a9955;
}

.dark .token.punctuation,
.dark .language-html .language-css .token.punctuation,
.dark .language-html .language-javascript .token.punctuation {
	color: #d4d4d4;
}

.dark .token.property,
.dark .token.tag,
.dark .token.boolean,
.dark .token.number,
.dark .token.constant,
.dark .token.symbol,
.dark .token.inserted,
.dark .token.unit {
	color: #b5cea8;
}

.dark .token.selector,
.dark .token.attr-name,
.dark .token.string,
.dark .token.char,
.dark .token.builtin,
.dark .token.deleted {
	color: #ce9178;
}

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

.dark .token.operator,
.dark .token.entity {
	color: #d4d4d4;
}

.dark .token.operator.arrow {
	color: #569CD6;
}

.dark .token.atrule {
	color: #ce9178;
}

.dark .token.atrule .token.rule {
	color: #c586c0;
}

.dark .token.atrule .token.url {
	color: #9cdcfe;
}

.dark .token.atrule .token.url .token.function {
	color: #dcdcaa;
}

.dark .token.atrule .token.url .token.punctuation {
	color: #d4d4d4;
}

.dark .token.keyword {
	color: #569CD6;
}

.dark .token.keyword.module,
.dark .token.keyword.control-flow {
	color: #c586c0;
}

.dark .token.function,
.dark .token.function .token.maybe-class-name {
	color: #dcdcaa;
}

.dark .token.regex {
	color: #d16969;
}

.dark .token.important {
	color: #569cd6;
}

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

.dark .token.constant {
	color: #9cdcfe;
}

.dark .token.class-name,
.dark .token.maybe-class-name {
	color: #4ec9b0;
}

.dark .token.console {
	color: #9cdcfe;
}

.dark .token.parameter {
	color: #9cdcfe;
}

.dark .token.interpolation {
	color: #9cdcfe;
}

.dark .token.punctuation.interpolation-punctuation {
	color: #569cd6;
}

.dark .token.boolean {
	color: #569cd6;
}

.dark .token.property,
.dark .token.variable,
.dark .token.imports .token.maybe-class-name,
.dark .token.exports .token.maybe-class-name {
	color: #9cdcfe;
}

.dark .token.selector {
	color: #d7ba7d;
}

.dark .token.escape {
	color: #d7ba7d;
}

.dark .token.tag {
	color: #569cd6;
}

.dark .token.tag .token.punctuation {
	color: #808080;
}

.dark .token.cdata {
	color: #808080;
}

.dark .token.attr-name {
	color: #9cdcfe;
}

.dark .token.attr-value,
.dark .token.attr-value .token.punctuation {
	color: #ce9178;
}

.dark .token.attr-value .token.punctuation.attr-equals {
	color: #d4d4d4;
}

.dark .token.entity {
	color: #569cd6;
}

.dark .token.namespace {
	color: #4ec9b0;
}

.dark pre[class*="language-javascript"],
.dark code[class*="language-javascript"],
.dark pre[class*="language-jsx"],
.dark code[class*="language-jsx"],
.dark pre[class*="language-typescript"],
.dark code[class*="language-typescript"],
.dark pre[class*="language-tsx"],
.dark code[class*="language-tsx"] {
	color: #9cdcfe;
}

.dark pre[class*="language-css"],
.dark code[class*="language-css"] {
	color: #ce9178;
}

.dark pre[class*="language-html"],
.dark code[class*="language-html"] {
	color: #d4d4d4;
}

.dark .language-regex .token.anchor {
	color: #dcdcaa;
}

.dark .language-html .token.punctuation {
	color: #808080;
}

.dark pre[class*="language-"] > code[class*="language-"] {
	position: relative;
	z-index: 1;
}

.dark .line-highlight.line-highlight {
	background: #f7ebc6;
	box-shadow: inset 5px 0 0 #f7d87c;
	z-index: 0;
}

/* Copy Button Styles */
.code-block-wrapper {
	position: relative;
	overflow: visible; /* Ensure button visibility */
}

.code-copy-button {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 10;
	opacity: 0.7;
	transition: opacity 0.2s ease;
	
	/* Shoelace tooltip theming for light mode */
	--sl-tooltip-background-color: var(--sl-color-neutral-900);
	--sl-tooltip-color: var(--sl-color-neutral-0);
}

.code-copy-button:hover,
.code-copy-button:focus {
	opacity: 1;
}

/* Ensure code blocks have space for the copy button */
.code-block-wrapper pre[class*="language-"] {
	padding-right: 2.5rem; /* Space for button */
}

/* Dark theme adjustments for copy button */
.dark .code-copy-button {
	--sl-tooltip-background-color: var(--sl-color-neutral-0);
	--sl-tooltip-color: var(--sl-color-neutral-900);
}

/* High contrast mode support */
@media (forced-colors: active) {
	.code-copy-button {
		border: 1px solid CanvasText;
		background: Canvas;
	}
}

/* Mobile responsiveness */
@media (max-width: 640px) {
	.code-copy-button {
		top: 0.5rem;
		right: 0.5rem;
	}
	
	.code-block-wrapper pre[class*="language-"] {
		padding-right: 2rem;
	}
}