/* Code Scrollbar Plugin - コードブロックに水平スクロールバーを追加 */

/* 通常のコードブロック（<pre><code>） */
pre {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

pre code {
	display: block;
	white-space: pre;
	word-wrap: normal;
	overflow-wrap: normal;
}

/* インラインコード（<code>）は通常通り */
code:not(pre code) {
	white-space: normal;
}

/* highlight.js を使用している場合の対応 */
pre code.hljs {
	display: block;
	white-space: pre;
	word-wrap: normal;
	overflow-wrap: normal;
	overflow-x: auto;
}

/* スクロールバーのスタイリング（Webkit系ブラウザ） */
pre::-webkit-scrollbar {
	height: 8px;
}

pre::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

pre::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
	background: #555;
}

/* ダークモード対応 */
body.dark-mode pre::-webkit-scrollbar-track {
	background: #2a2a2a;
}

body.dark-mode pre::-webkit-scrollbar-thumb {
	background: #666;
}

body.dark-mode pre::-webkit-scrollbar-thumb:hover {
	background: #888;
}

/* Firefox用のスクロールバー（薄いスタイル） */
pre {
	scrollbar-width: thin;
	scrollbar-color: #888 #f1f1f1;
}

body.dark-mode pre {
	scrollbar-color: #666 #2a2a2a;
}

/* コードブロック内のテーブル行のスタイルを無効化 */
/* テーマの tr:nth-child(even) スタイルを上書き */
pre code tr:nth-child(even),
pre code.hljs tr:nth-child(even),
pre tr:nth-child(even) {
	background-color: transparent !important;
}