//------------------------------------------------------------------------------
// @base: Code
//------------------------------------------------------------------------------
// @author: hanakin -- midaym
// @version: 1.1.0
// @description:
//
//------------------------------------------------------------------------------

@use 'sass:math';

//
// #settings

// Layout Variables
$kbd-padding: $sp1-2 !default;
$pre-padding: $sp2 !default;
$pre-border-radius: $default-border-radius !default;
$code-border-radius: $default-border-radius !default;
$pre-border-width: 0 !default;
$kbd-nested-font-weight: 700 !default;

// Theme Variables
$code-font-family: $default-code-font;
$code-bg: $default-surface-color !default;
$code-color: $green !default;
$kbd-bg: $default-background-color-inverted !default;
$kbd-color: $default-background-item-color-inverted !default;
$kbd-border-color: $default-border-color-inverted !default;
$pre-bg: $gray-1200 !default;
$pre-border-color: $default-border-color-inverted !default;
$pre-color: $gray-300 !default;

//
// #scss

// Inline and block code styles
code,
kbd,
pre,
samp {
	font-family: $code-font-family;
}

// Inline code
code,
kbd {
	@include type(body1);
	background-color: $code-bg;
	border-radius: $code-border-radius;
	color: $code-color;
	padding: math.div($kbd-padding, 2) $kbd-padding;
}

// User input typically entered via keyboard
kbd {
	background-color: $kbd-bg;
	box-shadow: inset 0 -1px 0 $kbd-border-color;
	color: $kbd-color;

	kbd {
		font-size: 100%;
		font-weight: $kbd-nested-font-weight;
		box-shadow: none;
		padding: 0;
	}
}

// Blocks of code
pre {
	@include type(body1);
	word-wrap: break-word;
	word-break: break-all;
	background-color: $pre-bg;
	border-width: $pre-border-width;
	border-style: solid;
	border-color: $pre-border-color;
	border-radius: $pre-border-radius;
	color: $pre-color;
	display: block;
	margin-top: 0;
	margin-bottom: $pre-padding;
	padding: $pre-padding;

	// Account for some code outputs that place code tags in pre tags
	code {
		font-size: inherit;
		white-space: pre-wrap;
		background-color: transparent;
		border-radius: 0;
		color: inherit;
		padding: 0;
	}
}