// Theme Styles //
.v-code-block {
	&--tab {
		&-prism,
		&-highlightjs {

			// Neon Bunny coloring //
			&-neon-bunny {
				background-color: hsl(var(--v-cb-tab-neon-bunny-bkg) / 100%) !important;
				color: hsl(var(--v-cb-tab-neon-bunny-text)) !important;

				&:hover {
					background-color: hsl(var(--v-cb-tab-neon-bunny-bkg) / 50%) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-neon-bunny-icon)) !important;
					fill: hsl(var(--v-cb-tab-neon-bunny-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-neon-bunny-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-neon-bunny-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-neon-bunny-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-neon-bunny-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-neon-bunny-text));
				}
			}

			&-neon-bunny-carrot {
				background-color: hsl(var(--v-cb-tab-neon-bunny-carrot-bkg) / 100%) !important;
				color: hsl(var(--v-cb-tab-neon-bunny-carrot-text)) !important;

				&:hover {
					background-color: hsl(var(--v-cb-tab-neon-bunny-carrot-bkg) / 50%) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-neon-bunny-carrot-icon)) !important;
					fill: hsl(var(--v-cb-tab-neon-bunny-carrot-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-neon-bunny-carrot-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-neon-bunny-carrot-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-neon-bunny-carrot-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-neon-bunny-carrot-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-neon-bunny-carrot-text));
				}
			}
		}

		// -------------------------------------------------- Prism Themes //
		&-prism {

			// Base Themes //
			&-coy {
				background-color: hsl(var(--v-cb-tab-prism-coy-bkg) / 10%) !important;
				border-left: 5px solid hsl(var(--v-cb-tab-prism-coy-bkg));
				border-radius: 0;

				&:hover {
					background-color: hsl(var(--v-cb-tab-prism-coy-bkg) / 20%) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-prism-coy-icon)) !important;
					fill: hsl(var(--v-cb-tab-prism-coy-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-prism-coy-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-prism-coy-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-prism-coy-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-prism-coy-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-prism-coy-text));
				}
			}

			&-dark {
				background-color: hsl(var(--v-cb-tab-prism-dark-bkg) / 100%) !important;
				border-color: hsl(var(--v-cb-tab-prism-dark-border));
				border-style: solid;
				border-width: 0.3em 0.3em 0;

				&:hover {
					background-color: hsl(var(--v-cb-tab-prism-dark-border) / 50%) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-prism-dark-icon)) !important;
					fill: hsl(var(--v-cb-tab-prism-dark-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-prism-dark-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-prism-dark-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-prism-dark-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-prism-dark-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-prism-dark-text));
				}
			}

			&-default {
				background-color: hsl(var(--v-cb-tab-prism-default-bkg) / 100%) !important;

				&:hover {
					background-color: hsl(var(--v-cb-tab-prism-default-bkg) / 50%) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-prism-default-icon)) !important;
					fill: hsl(var(--v-cb-tab-prism-default-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-prism-default-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-prism-default-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-prism-default-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-prism-default-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-prism-default-text));
				}
			}

			&-funky {
				background: url('data:image/svg+xml;charset=utf-8,<svg%20version%3D"1.1"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"100"%20height%3D"100"%20fill%3D"rgba(0%2C0%2C0%2C.2)">%0D%0A<polygon%20points%3D"0%2C50%2050%2C0%200%2C0"%20%2F>%0D%0A<polygon%20points%3D"0%2C100%2050%2C100%20100%2C50%20100%2C0"%20%2F>%0D%0A<%2Fsvg>');
				background-size: 1em 1em;

				&:hover {
					background-color: hsl(var(--v-cb-tab-prism-funky-bkg)) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-prism-funky-icon)) !important;
					fill: hsl(var(--v-cb-tab-prism-funky-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-prism-funky-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-prism-funky-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-prism-funky-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-prism-funky-icon-failed)) !important;
						}
					}
				}

				> div {
					background-color: hsl(var(--v-cb-tab-prism-funky-dark)) !important;
					color: hsl(var(--v-cb-tab-prism-funky-text));
				}
			}

			&-okaidia {
				background-color: hsl(var(--v-cb-tab-prism-okaidia-bkg) / 100%) !important;

				&:hover {
					background-color: hsl(var(--v-cb-tab-prism-okaidia-bkg) / 50%) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-prism-okaidia-icon)) !important;
					fill: hsl(var(--v-cb-tab-prism-okaidia-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-prism-okaidia-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-prism-okaidia-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-prism-okaidia-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-prism-okaidia-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-prism-okaidia-text));
				}
			}

			&-solarizedlight {
				background-color: hsl(var(--v-cb-tab-prism-solarizedlight-bkg) / 100%) !important;

				&:hover {
					background-color: hsl(var(--v-cb-tab-prism-solarizedlight-bkg) / 50%) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-prism-solarizedlight-icon)) !important;
					fill: hsl(var(--v-cb-tab-prism-solarizedlight-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-prism-solarizedlight-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-prism-solarizedlight-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-prism-solarizedlight-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-prism-solarizedlight-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-prism-solarizedlight-text));
				}
			}

			&-tomorrow {
				background-color: hsl(var(--v-cb-tab-prism-tomorrow-bkg) / 100%) !important;

				&:hover {
					background-color: hsl(var(--v-cb-tab-prism-tomorrow-bkg) / 50%) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-prism-tomorrow-icon)) !important;
					fill: hsl(var(--v-cb-tab-prism-tomorrow-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-prism-tomorrow-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-prism-tomorrow-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-prism-tomorrow-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-prism-tomorrow-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-prism-tomorrow-text));
				}
			}

			&-twilight {
				background-color: hsl(var(--v-cb-tab-prism-twilight-bkg) / 100%) !important;
				border-color: hsl(var(--v-cb-tab-prism-twilight-border));
				border-style: solid;
				border-width: 0.3em 0.3em 0;

				&:hover {
					background-color: hsl(var(--v-cb-tab-prism-twilight-bkg) / 50%) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-prism-twilight-icon)) !important;
					fill: hsl(var(--v-cb-tab-prism-twilight-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-prism-twilight-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-prism-twilight-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-prism-twilight-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-prism-twilight-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-prism-twilight-text));
				}
			}

			// Prism Themes Repo //
			// ? Additional styles from the https://github.com/PrismJS/prism-themes //
			&-themes {

				// ? Add new Prism Themes here //
				&-night-owl {
					background-color: hsl(var(--v-cb-tab-prism-themes-night-owl) / 100%) !important;

					&:hover {
						background-color: hsl(var(--v-cb-tab-prism-themes-night-owl) / 50%) !important;
					}

					&-icon {
						color: hsl(var(--v-cb-tab-prism-themes-night-owl-icon)) !important;
						fill: hsl(var(--v-cb-tab-prism-themes-night-owl-icon)) !important;

						&-status {
							&-success {
								color: hsl(var(--v-cb-tab-prism-themes-night-owl-icon-success)) !important;
								fill: hsl(var(--v-cb-tab-prism-themes-night-owl-icon-success)) !important;
							}

							&-failed {
								color: hsl(var(--v-cb-tab-prism-themes-night-owl-icon-failed)) !important;
								fill: hsl(var(--v-cb-tab-prism-themes-night-owl-icon-failed)) !important;
							}
						}
					}

					> div {
						color: hsl(var(--v-cb-tab-prism-themes-night-owl-text));
					}
				}
			}
		}

		// -------------------------------------------------- Highlight.js Themes //
		&-highlightjs {

			// Themes with additional styles //
			&-brown-paper {
				background-color: var(--v-cb-tab-highlightjs-brown-paper-bkg);
				background-image: var(--v-cb-tab-highlightjs-brown-paper-bkg-img);

				&:hover {
					background-color: hsl(var(--v-cb-tab-highlightjs-brown-paper-bkg)) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-highlightjs-brown-paper-icon)) !important;
					fill: hsl(var(--v-cb-tab-highlightjs-brown-paper-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-highlightjs-brown-paper-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-highlightjs-brown-paper-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-highlightjs-brown-paper-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-highlightjs-brown-paper-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-highlightjs-brown-paper-text));
				}
			}

			&-gradient-dark {
				background: var(--v-cb-tab-highlightjs-gradient-dark-bkg-gradient);
				background-color: var(--v-cb-tab-highlightjs-gradient-dark-bkg);

				&:hover {
					background-color: hsl(var(--v-cb-tab-highlightjs-gradient-dark-bkg)) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-highlightjs-gradient-dark-icon)) !important;
					fill: hsl(var(--v-cb-tab-highlightjs-gradient-dark-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-highlightjs-gradient-dark-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-highlightjs-gradient-dark-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-highlightjs-gradient-dark-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-highlightjs-gradient-dark-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-highlightjs-gradient-dark-text));
				}
			}

			&-gradient-light {
				background: var(--v-cb-tab-highlightjs-gradient-light-bkg-gradient);
				background-color: var(--v-cb-tab-highlightjs-gradient-light-bkg);

				&:hover {
					background-color: hsl(var(--v-cb-tab-highlightjs-gradient-light-bkg)) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-highlightjs-gradient-light-icon)) !important;
					fill: hsl(var(--v-cb-tab-highlightjs-gradient-light-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-highlightjs-gradient-light-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-highlightjs-gradient-light-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-highlightjs-gradient-light-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-highlightjs-gradient-light-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-highlightjs-gradient-light-text));
				}
			}

			&-pojoaque {
				background: var(--v-cb-tab-highlightjs-pojoaque-bkg-img);
				background-color: var(--v-cb-tab-highlightjs-pojoaque-bkg);

				&:hover {
					background-color: hsl(var(--v-cb-tab-highlightjs-pojoaque-bkg)) !important;
				}

				&-icon {
					color: hsl(var(--v-cb-tab-highlightjs-pojoaque-icon)) !important;
					fill: hsl(var(--v-cb-tab-highlightjs-pojoaque-icon)) !important;

					&-status {
						&-success {
							color: hsl(var(--v-cb-tab-highlightjs-pojoaque-icon-success)) !important;
							fill: hsl(var(--v-cb-tab-highlightjs-v-icon-success)) !important;
						}

						&-failed {
							color: hsl(var(--v-cb-tab-highlightjs-pojoaque-icon-failed)) !important;
							fill: hsl(var(--v-cb-tab-highlightjs-pojoaque-icon-failed)) !important;
						}
					}
				}

				> div {
					color: hsl(var(--v-cb-tab-highlightjs-pojoaque-text));
				}
			}

			// Themes that use common styles  //
			// ? New themes that do not require additional styles should be added her (alpha order please) //
			$hljs-themes: 'default',
				'a11y-dark',
				'a11y-light',
				'agate',
				'an-old-hope',
				'androidstudio',
				'arduino-light',
				'arta',
				'ascetic',
				'atom-one-dark-reasonable',
				'atom-one-dark',
				'atom-one-light',
				'base16-onedark',
				'codepen-embed',
				'color-brewer',
				'dark',
				'devibeans',
				'docco',
				'far',
				'felipec',
				'foundation',
				'github-dark-dimmed',
				'github-dark',
				'github',
				'gml',
				'googlecode',
				'grayscale',
				'hybrid',
				'idea',
				'intellij-light',
				'ir-black',
				'isbl-editor-dark',
				'isbl-editor-light',
				'kimbie-dark',
				'kimbie-light',
				'lightfair',
				'lioshi',
				'magula',
				'mono-blue',
				'monokai-sublime',
				'monokai',
				'night-owl',
				'nnfx-dark',
				'nnfx-light',
				'nord',
				'obsidian',
				'panda-syntax-dark',
				'panda-syntax-light',
				'paraiso-dark',
				'paraiso-light',
				'purebasic',
				'qtcreator-dark',
				'qtcreator-light',
				'rainbow',
				'routeros',
				'school-book',
				'shades-of-purple',
				'srcery',
				'stackoverflow-dark',
				'stackoverflow-light',
				'sunburst',
				'tokyo-night-dark',
				'tokyo-night-light',
				'tomorrow-night-blue',
				'tomorrow-night-bright',
				'vs',
				'vs2015',
				'xcode',
				'xt256',
				'base16-onedark',;

			// Generate the styles for each commonly styled themes //
			// ! Do not adjust the following code ! //
			@each $theme in $hljs-themes {
				&-#{$theme} {
					background-color: hsl(var(--v-cb-tab-highlightjs-#{$theme}-bkg) / 100%) !important;

					&:hover {
						background-color: hsl(var(--v-cb-tab-highlightjs-#{$theme}-bkg) / 50%) !important;
					}

					&-icon {
						color: hsl(var(--v-cb-tab-highlightjs-#{$theme}-icon)) !important;
						fill: hsl(var(--v-cb-tab-highlightjs-#{$theme}-icon)) !important;

						&-status {
							&-success {
								color: hsl(var(--v-cb-tab-highlightjs-#{$theme}-icon-success)) !important;
								fill: hsl(var(--v-cb-tab-highlightjs-#{$theme}-icon-success)) !important;
							}

							&-failed {
								color: hsl(var(--v-cb-tab-highlightjs-#{$theme}-icon-failed)) !important;
								fill: hsl(var(--v-cb-tab-highlightjs-#{$theme}-icon-failed)) !important;
							}
						}
					}

					> div {
						color: hsl(var(--v-cb-tab-highlightjs-#{$theme}-text));
					}
				}
			}
		}
	}
}