// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
// For licensing, see LICENSE.md.

/**
 * Okaidia theme for JavaScript, CSS and HTML.
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 *
 * The theme was a little bit cleaned up to match Umberto theme.
 */

@use 'helpers/spacing';

code.highlight[class*="language-"],
pre.highlight[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 0.9em; // Decreased from 1.0 to 0.9.
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.75; // Increased from 1.5 to 1.75.
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre.highlight[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code.highlight[class*="language-"],
pre.highlight[class*="language-"] {
	background: #272822;
}

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

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #8292a2;
}

.token.punctuation {
	color: #f8f8f2;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.attr-name,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted,
.token.keyword {
	color: #f92672;
}

.token.boolean,
.token.number,
.token.regex,
.token.important {
	color: #ae81ff;
}

.token.selector,
.token.string,
.token.char,
.token.builtin,
.token.inserted,
.token.atrule,
.token.attr-value {
	color: #e6db74;
}

.token.function {
	color: #a6e22e;
}

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

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

.language-yaml {
	.token.string {
		color: #a6e22e;
	}
}

div.code-toolbar {
	position: relative;

	& > .toolbar {
		position: absolute;
		top: spacing.u-spacing( -2 );
		right: spacing.u-spacing( -2 );
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;

		.toolbar-item + .toolbar-item {
			margin-left: spacing.u-spacing( -3 );
		}

		& button {
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			width: 35px;
			height: 35px;
			border: 0;
			margin: 0;
			padding: 0;

			background: transparent;
			border-radius: 2px;
			opacity: .5;
			transition: opacity .08s ease-in-out, background .08s ease-in-out;

			&::before {
				width: 20px;
				height: 20px;
				filter: invert( 1 );
			}

			&:hover {
				opacity: 1;
				background: hsla(0,0%,100%,0.13);
			}

			&[data-copy-state="copy-success"] {
				opacity: 1;
			}

			&.copy-to-clipboard-button {
				&::before {
					content: url( ../img/clipboard.svg );
					/* This icon looks better with the center of weight slightly shifted. */
					margin-left: 2px;
				}

				&[data-copy-state="copy-success"]::before {
					content: url( ../img/tick.svg );
					margin-left: 0;
					filter: invert( 0 );

					animation-duration: .5s;
  					animation-name: bounce-in;
				}
			}

			&.download-snippet-button::before {
				content: url( ../img/download.svg );
			}
		}

		& span {
			display: none;
		}
	}
}

@keyframes bounce-in {
	0% {
		opacity: 0;
		transform: scale3d(.5, .5, .5);
	}

	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		transform: scale3d(.8, .8, .8);
	}

	60% {
		opacity: 1;
		transform: scale3d(1.05, 1.05, 1.05);
	}

	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}
