@import "../root";
@import "./conrtols";

// 共通
.mce-content-body .hcb_wrap {
	margin: 2em 0;
}

:root {
	--hcb--pY: 2em; // 高さセットにも使うので注意
	--hcb--pX: 1.5em;
	--hcb--linenumW: 3em;
}

// Block: hcb_wrap > hcb_codewrap > hcb_textarea
// Classic: hcb_wrap > pre
.hcb_wrap {
	position: relative;

	> .hcb_codewrap {
		position: relative;
		padding-right: 0.75em;
		color: var(--hcb--c);
		background: var(--hcb--bgc);
		border-radius: var(--hcb--radius);
	}
}

.hcb_wrap > pre,
.hcb_codewrap,
.hcb_textarea {
	color: var(--hcb--c) !important;
	font-size: var(--hcb--fz, 14px) !important;
	font-family: var(--hcb--ff) !important;
	line-height: 1.5 !important;
	background: var(--hcb--bgc) !important;
}


.hcb_wrap.hcb_wrap > pre,
.hcb_textarea.hcb_textarea {
	position: static;
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0 !important;
	padding: var(--hcb--pY) var(--hcb--pX);
	overflow-x: auto;
	white-space: pre !important;
	overflow-wrap: break-word;
	tab-size: 4;
	border: none;
	border-radius: 0;


	// スクロールバー
	&::-webkit-scrollbar {
		height: 6px;
		border: none;
	}

	&::-webkit-scrollbar-track {
		background: var(--hcb--scbar-track--bgc);
		border: none;
	}

	&::-webkit-scrollbar-thumb {
		background: var(--hcb--scbar-thumb--bgc);
		border-radius: 3px;
	}
}

.hcb_textarea.hcb_textarea {
	// `calc(${height}em + ${scbarH}px)`;
	height: calc(1.5em * var(--hcb--code-linenum, 1) + var(--hcb--pY) * 2 + var(--hcb--scbarH, 0px));
	outline: none;
	box-shadow: none;
	resize: none;

	&::placeholder {
		color: inherit;
		font-style: italic;
		opacity: 0.5;
	}

	&::-ms-input-placeholder,
	&::-moz-placeholder,
	&::-webkit-input-placeholder {
		color: inherit;
		font-style: italic;
		opacity: 0.5;
	}
}


.hcb_wrap > pre code {
	display: block;
	padding: 0 !important;
	color: inherit !important;
	font-family: inherit !important;
	tab-size: 2;
	background: inherit !important;
}

// 行数表示 → エディダーではオン・オフが分かるように縦ボーダーだけ表示
.hcb_linenum {
	position: absolute;
	top: var(--hcb--pY);
	left: calc(var(--hcb--linenumW) / 2 + 0.5em);
	width: 0;
	height: calc(100% - var(--hcb--pY) * 2);
	color: var(--hcb--line-numbers--c);
	border-right: solid 1px currentcolor;

	> .hcb-startNum {
		position: absolute;
		top: 0;
		right: 0.5em;
		right: calc(0.95em - 1px);
		font: inherit;
		font-size: 0.95em;
		line-height: 1.5;
		white-space: nowrap;
		word-wrap: normal;
		translate: 50%;
	}
}


.hcb-block[data-show-linenum] {

	.hcb_codewrap {
		padding-left: calc(var(--hcb--linenumW) / 2 + 1em);
	}

	.hcb_textarea {
		padding-left: calc(var(--hcb--linenumW) / 2 - 1em);
	}

}


// Lang Name
.hcb_wrap > pre::before, // for Classic
.hcb-block::before {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	box-sizing: border-box;
	min-width: 4em;
	padding: 0 10px;
	color: var(--hcb--data-label--c);
	font-size: 0.925em;
	font-family: inherit;
	line-height: 20px;
	text-align: center;
	background-color: var(--hcb--data-label--bgc);
	border-radius: 0 var(--hcb--radius);
	content: var(--hcb--data-label);
}


.hcb-block[data-show-lang="0"] {
	--hcb--data-label: none;
}

.hcb-block[data-show-lang="1"] {
	--hcb--data-label: attr(data-lang);
}

// [data-file] があれば、lang 非表示でも表示する
.hcb-block[data-file]::before {
	padding: 0 8px 0 20px;
	background-image: var(--hcb--file-icon);
	background-repeat: no-repeat;
	background-position: center left 8px;
	background-size: auto 10px;
	content: attr(data-file); // --hcb--data-label: attr(data-file);
}

// .hcb-block[data-show-lang="0"]:not([data-file])::before {
// 	content: none;
// }