@import "variables";
@import "functions";
//@import "mixins";

$code_font_size: 14px;
$code_line_height: 28px;
$code_line_height_double: $code_line_height * 2;

.nebula-code-con {margin: 0 0 20px;}
	pre.nebula-code,
	.nebula-code-con pre {position: relative; display: block; height: auto; font-style: normal; font-weight: normal; font-size: rem($code_font_size); line-height: rem($code_line_height); font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Monaco", monospace !important;
color: #222; margin: 0; padding: 0 1em; overflow-x: auto; white-space: pre-wrap; word-wrap: normal; border: 1px solid #444; border-left: 5px solid #444; background: repeating-linear-gradient(to bottom, #f2f2f2 0, #f2f2f2 rem($code_line_height), #e8e8e8 rem($code_line_height), #e8e8e8 rem($code_line_height_double));}
	.nebula-code.codetitle {display: block; text-align: right; color: #f1672c; font-weight: normal; font-size: rem($code_font_size); line-height: rem($code_font_size); margin: 0 0 2px; padding: 0; cursor: default;}

.nebula-selectcopy-code {font-size: rem($code_font_size); float: right; margin-top: 0; font-weight: normal; opacity: 0.7;
	&:hover {opacity: 1;}
	&.success {color: $success_color;}
	&.error {color: $danger_color;}
}




.wp-block-code {position: relative; display: block; height: auto; font-style: normal; font-weight: normal; font-size: rem($code_font_size); line-height: rem($code_line_height); font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Monaco", monospace !important;
 color: #222; margin: 0; padding: 0 1em; overflow-x: auto; white-space: pre-wrap; word-wrap: normal; border: 1px solid #444; border-left: 5px solid #444; background: repeating-linear-gradient(to bottom, #f2f2f2 0, #f2f2f2 rem($code_line_height), #e8e8e8 rem($code_line_height), #e8e8e8 rem($code_line_height_double));
	code {background: none; border: none; padding: 0;}
}




//@include nebula_code(javascript jquery js, #2b5797);
@mixin nebula_code($languages, $color: $text_color, $unicode: false, $style: "Font Awesome 6 Solid"){
	@each $language in $languages {
		.nebula-code.codetitle.#{$language} {color: $color;
			@if $unicode {
				&:before {content: "\#{$unicode}"; font-family: $style; display: none;}
				svg {margin-right: 3px;}
			}
		}

		.nebula-code-con.#{$language} a,
		.nebula-code.codetitle.#{$language} {color: $color;}

		.wp-block-code.#{$language},
		code.nebula-code.#{$language},
		pre.nebula-code.#{$language},
		.nebula-code-con.#{$language} pre,
		.nebula-code.#{$language} .gist-file {border: 1px solid $color; border-left: 5px solid $color;}
			.nebula-code.#{$language}::selection {background: rgba(lighten($color, 10%), 0.5);} //::Selection does not work with Sass parent selectors
	}
}

@include nebula_code(apache directive, #af2473);
@include nebula_code(html htm, brand(html), f13b, "Font Awesome 6 Brands");
@include nebula_code(actionscript as, #a42222);
@include nebula_code(css, brand(css), f13c, "Font Awesome 6 Brands");
@include nebula_code(sass scss, brand(sass), f41e, "Font Awesome 6 Brands");
@include nebula_code(javascript js jquery, brand(javascript), f3b8, "Font Awesome 6 Brands");
@include nebula_code(php, brand(php));
@include nebula_code(regex, #666);
@include nebula_code(shortcode wordpress, brand(wordpress), f19a, "Font Awesome 6 Brands");
@include nebula_code(sql mysql, #3e78a6);