@use '../tokens/index.scss' as tokens;

$code-block-pre-font-size: tokens.$font-size-8 !default;
$code-block-pre-spacing: 1em !default;
$code-block-pre-line-height: 1.3571 !default;
$code-block-pre-border-color: tokens.$code-block-border !default;
$code-block-pre-border-width: tokens.$border-width !default;
$code-block-pre-border-radius: tokens.$border-radius !default;
$code-block-pre-background-color: tokens.$code-block !default;

$code-block-pre-padding: tokens.$spacer-4 !default;

@mixin code-block($code-block-component: false) {
	@if $code-block-component == true {
		background-color: $code-block-pre-background-color;
		overflow: auto;
	}

	pre {
		box-sizing: border-box;
		max-width: 100%;
		margin: 0;
		padding: $code-block-pre-padding;
		outline-color: currentColor;
		outline-offset: -(tokens.$focus-width);
		font-size: $code-block-pre-font-size;
		-moz-osx-font-smoothing: auto;
		-webkit-font-smoothing: auto;
		line-height: $code-block-pre-line-height;
		white-space: pre;
		word-spacing: normal;
		overflow: auto;
		word-break: normal;
		word-wrap: normal;
		tab-size: 4;
		hyphens: none;
		-webkit-overflow-scrolling: touch;

		@if $code-block-component == false {
			border: $code-block-pre-border-width solid $code-block-pre-border-color;
			border-radius: $code-block-pre-border-radius;
			background-color: $code-block-pre-background-color;
		}

		> code {
			display: block;
			position: relative;
			padding: 0;
			border: 0;
			line-height: $code-block-pre-line-height;

			mark {
				display: inline-block;
				min-width: calc(100% + #{$code-block-pre-spacing} + #{$code-block-pre-spacing});
				min-height: 18.9px; // Allow for highlighting of blank lines.
				margin: 0 $code-block-pre-spacing * -1;
				padding: 0 $code-block-pre-spacing;
				color: tokens.$text;
			}
		}
	}
}