/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+ruby+markup-templating+php&plugins=line-numbers */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

.ide {
	background-color: var(--config-prism-background);
	overflow: hidden;
	position: relative;
	z-index: 1;
	box-shadow: 0 2px 4px 0 rgba(50,50,93,.3);
	border-radius: 10px;
	margin-bottom: 30px;
	&:extend(.force-left);
	&:extend(.force-ltr);

	* {
		font-family: 'Source Code Pro', monospace;
	}

	&[data-lang]::after {
		content: attr(data-lang-label);
		display: inline-block;
		background: #ffffff;
		color: #000000;
		position: absolute;
		top: 15px;
		padding: 5px 10px;
		border-radius: 15px;
		font-size: 10px;
		right: 10px; // should be right for both ltr and rtl
		opacity: 0.95;
	}

	&[data-lang="bash"]::after {
		background: var(--config-language-bash);
		color: var(--config-language-bash-contrast);
	}

	&[data-lang="javascript"]::after {
		background: var(--config-language-javascript);
		color: var(--config-language-javascript-contrast);
	}

	&[data-lang="web"]::after {
		background: var(--config-language-web);
		color: var(--config-language-web-contrast);
	}

	&[data-lang="html"]::after {
		background: var(--config-language-html);
		color: var(--config-language-html-contrast);
	}

	&[data-lang="php"]::after {
		background: var(--config-language-php);
		color: var(--config-language-php-contrast);
	}

	&[data-lang="nodejs"]::after {
		background: var(--config-language-nodejs);
		color: var(--config-language-nodejs-contrast);
	}

	&[data-lang="ruby"]::after {
		background: var(--config-language-ruby);
		color: var(--config-language-ruby-contrast);
	}

	&[data-lang="python"]::after {
		background: var(--config-language-python);
		color: var(--config-language-python-contrast);
	}

	&[data-lang="go"]::after {
		background: var(--config-language-go);
		color: var(--config-language-go-contrast);
	}

	&[data-lang="dart"]::after {
		background: var(--config-language-dart);
		color: var(--config-language-dart-contrast);
	}

	&[data-lang="flutter"]::after {
		background: var(--config-language-flutter);
		color: var(--config-language-flutter-contrast);
	}

	&[data-lang="android"]::after {
		background: var(--config-language-android);
		color: var(--config-language-android-contrast);
	}

	&[data-lang="kotlin"]::after {
		background: var(--config-language-kotlin);
		color: var(--config-language-kotlin-contrast);
	}

	&[data-lang="java"]::after {
		background: var(--config-language-java);
		color: var(--config-language-java-contrast);
	}

	&[data-lang="yaml"]::after {
		background: var(--config-language-yaml);
		color: var(--config-language-yaml-contrast);
	}

	.tag {
		color: inherit!important;
		background: transparent!important;
		padding: inherit!important;
		font-size: inherit!important;
		line-height: 14px;
	}

	.copy {
		cursor: pointer;
		content: attr(data-lang);
		display: inline-block;
		background: #ffffff;
		color: #000000;
		position: absolute;
		transform: translateX(-50%);
		bottom: -20px;
		padding: 5px 10px;
		border-radius: 15px;
		font-size: 10px;
		font-style: normal;
		.func-start(50%);
		opacity: 0;
		transition: bottom .3s, opacity .3s;
		line-height: normal;
		font-family: 'Poppins', sans-serif;

		&::before {
			.func-padding-end(5px);
		}
	}
			
	&:hover {
		.copy {
			transition: bottom .3s, opacity .3s;
			opacity: 0.90;
			bottom: 16px;
		}
	}

	pre {
		-webkit-hyphens: none;
		-moz-hyphens: none;
		-ms-hyphens: none;
		hyphens: none;
		color: #e6ebf1;
		font-weight: 400;
		line-height: 20px;
		font-size: 13px;
		margin: 0;
		padding: 20px;
		padding-left: 60px;
	}

	&.light {
		box-shadow: 0 2px 4px 0 rgba(50,50,93,.1);
		background-color: #ffffff;

		pre {
			color: #414770;
		}

		.token.comment,
		.token.prolog,
		.token.doctype,
		.token.cdata {
			color: #91a2b0;
		}

		.token.selector,
		.token.attr-name,
		.token.string,
		.token.char,
		.token.builtin,
		.token.inserted {
			color: #149570;
		}

		.token.punctuation {
			color: #414770;
		}

		.token.operator,
		.token.entity,
		.token.url,
		.language-css .token.string,
		.style .token.string,
		.token.variable {
			color: #414770;
		}

		.line-numbers .line-numbers-rows {
			background: #f2feef;
		}

		.line-numbers-rows > span:before {
			color: #5dc79e;
		}

		.token.keyword {
			color: #6772e4;
			font-weight: 500;
		}
	}
}

code[class*="language-"],
pre[class*="language-"] {
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}

/* Code blocks */
pre[class*="language-"] {
	overflow: auto;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #6b7c93;
}

.token.punctuation {
	color: #f8f8f2;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #f92672;
}

.token.boolean,
.token.number {
	color: #f79a59;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #3ecf8e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #45b2e8;
}

.token.keyword {
	color: #7795f8;
}

.token.regex,
.token.important {
	color: #fd971f;
}

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

.token.entity {
	cursor: help;
}

pre[class*="language-"].line-numbers {
	position: relative;
	padding-left: 60px;
	counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
	position: relative;
	white-space: inherit;
}

.line-numbers .line-numbers-rows {
	background: var(--config-prism-numbers);
	position: absolute;
	pointer-events: none;
	top: -20px;
	bottom: -21px;
	padding: 20px 0;
	font-size: 100%;
	left: -60px;
	width: 40px; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.line-numbers-rows > span {
	.func-padding-end(5px);
	pointer-events: none;
	display: block;
	counter-increment: linenumber;
}

.line-numbers-rows > span:before {
	content: counter(linenumber);
	color: #636365;
	display: block;
	padding-right: 0.8em;
	text-align: right;
}