/**
 * 前端樣式：複製按鈕與檔名標題列。
 *
 * 按鈕貼在程式碼區塊的正上方（往上位移一個自己的高度），
 * 這樣不會蓋住第一行程式碼，捲動長程式碼時也不會擋住內容。
 */

/* 等寬字堆疊。Prism 官方只列到 Consolas，這裡把幾個常見的程式字型排在前面，
   裝了就用得到。用 :where() 讓佈景主題自己的設定永遠贏過這一條。 */
:where(pre.wp-block-code),
:where(pre.wp-block-code) > code {
	font-family: Hack, "Fira Code", Consolas, Menlo, Monaco, "Andale Mono",
		"Lucida Console", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
		"Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
}

.klab-code-syntax-copy {
	position: relative;
	margin-top: 24px;
	margin-bottom: 24px;
}

/* 外距改由容器控制，否則按鈕的定位基準會跟著 pre 的 margin 跑掉。 */
.klab-code-syntax-copy pre.wp-block-code {
	margin-top: 0;
	margin-bottom: 0;
}

.klab-code-syntax-copy-button {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	padding: 1px 10px;
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	line-height: 1.4;
	color: #666;
	background: #f0f0fd;
	border: 1px solid #ddd;
	border-radius: 4px 4px 0 0;
	cursor: pointer;
	transform: translateY(-100%);
	transition: background 0.2s ease, color 0.2s ease;
}

.klab-code-syntax-copy-button:hover {
	color: #333;
	background: #e5e5ef;
}

.klab-code-syntax-copy-button:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

.klab-code-syntax-copy-button.is-copied {
	color: #333;
	background: #e5e5ef;
	border-color: #d1d1e2;
}

.klab-code-syntax-copy-button.is-failed {
	color: #8a1f11;
	background: #fbe3e4;
	border-color: #fbc2c4;
}

/* 有檔名列時，按鈕改成貼齊那一列的右側，而不是浮在區塊上方。 */
.klab-code-syntax-copy.has-title .klab-code-syntax-copy-button {
	top: 0;
	transform: none;
	border-radius: 0 4px 0 0;
	border-color: transparent;
	background: transparent;
	color: #ccc;
}

.klab-code-syntax-copy.has-title .klab-code-syntax-copy-button:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

.klab-code-syntax-copy-title {
	padding: 4px 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: orange;
	background-color: #444;
	border-radius: 0.3em 0.3em 0 0;
}

.klab-code-syntax-copy.has-title pre.wp-block-code {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}