/**
 * WP GFM Renderer - Copy Button Styles
 *
 * MD-21実装: コードブロックコピーボタンのスタイル定義
 * 現代的なUI/UX設計とアクセシビリティを重視
 *
 * @package WpGfmRenderer
 * @since 0.2.0
 */

/* ==========================================================================
   Base Code Block Styling
   ========================================================================== */

.wp-gfm-code-container {
	position: relative;
	margin: 1em 0;
	border-radius: 6px;
	overflow: visible; /* ボタンが切れないよう変更 */
	background: var(--wp-gfm-code-bg, #0d1117);

	/* border removed per user request - no border around code blocks */
}

.wp-gfm-code-container pre {
	margin: 0;
	padding: 16px;
	overflow-x: auto;
	font-family: "Fira Code", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
	font-size: 14px;
	line-height: 1.45;
	background: transparent;
}

/* ==========================================================================
   Copy Button Styling
   ========================================================================== */

.wp-gfm-copy-button {
	position: absolute;
	top: 12px;
	right: 6px; /* より右端に配置 */
	z-index: 50; /* より高い優先度で確実に前面表示 */

	/* Button Appearance */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 6px 12px;

	/* Typography */
	font-size: 11px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
	min-width: 48px; /* ボタンの最小幅を保証 */

	/* Colors - Default (Dark theme) */
	color: var(--wp-gfm-copy-text, #f0f6fc);
	background: var(--wp-gfm-copy-bg, rgba(240, 246, 252, 0.1));
	border: 1px solid var(--wp-gfm-copy-border, rgba(240, 246, 252, 0.2));

	/* Border & Shadows */
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);

	/* Interaction */
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;

	/* Animation */
	opacity: 0.8; /* 常時表示に変更 */
	transform: translateY(0);
	transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

	/* Accessibility */
	outline: none;
	text-decoration: none;
}

/* ボタン自体のホバーとフォーカス時の表示強化 */
.wp-gfm-copy-button:hover,
.wp-gfm-copy-button:focus-visible {
	opacity: 1;
	transform: translateY(-1px);
}

/* ボタンのホバー状態（上記のホバー設定と統合） */
.wp-gfm-copy-button:hover {
	color: var(--wp-gfm-copy-text-hover, #fff);
	background: var(--wp-gfm-copy-bg-hover, rgba(240, 246, 252, 0.2));
	border-color: var(--wp-gfm-copy-border-hover, rgba(240, 246, 252, 0.3));
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	/* transform は上記の設定で統一 */
}

.wp-gfm-copy-button:active {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.wp-gfm-copy-button:focus-visible {
	outline: 2px solid var(--wp-gfm-copy-focus, #58a6ff);
	outline-offset: 2px;
}

/* Success State */
.wp-gfm-copy-button.copied {
	color: var(--wp-gfm-copy-success-text, #56d364);
	background: var(--wp-gfm-copy-success-bg, rgba(86, 211, 100, 0.1));
	border-color: var(--wp-gfm-copy-success-border, rgba(86, 211, 100, 0.3));
}

/* ==========================================================================
   Copy Button Icon
   ========================================================================== */

.wp-gfm-copy-icon {
	width: 14px;
	height: 14px;
	display: inline-block;
	transition: transform 0.2s ease;
}

.wp-gfm-copy-button:hover .wp-gfm-copy-icon {
	transform: scale(1.1);
}

/* ==========================================================================
   Light Theme Support
   ========================================================================== */

/* WordPress管理画面では常にライトテーマを適用 */
.wp-admin :root,
.wp-admin,
body.wp-admin {
	--wp-gfm-code-bg: #f6f8fa !important;
	--wp-gfm-copy-text: #24292f !important;
	--wp-gfm-copy-bg: rgba(255, 255, 255, 0.8) !important;
	--wp-gfm-copy-border: rgba(31, 35, 40, 0.15) !important;
	--wp-gfm-copy-text-hover: #24292f !important;
	--wp-gfm-copy-bg-hover: #fff !important;
	--wp-gfm-copy-border-hover: rgba(31, 35, 40, 0.25) !important;
	--wp-gfm-copy-focus: #0969da !important;
	--wp-gfm-copy-success-text: #1a7f37 !important;
	--wp-gfm-copy-success-bg: rgba(26, 127, 55, 0.1) !important;
	--wp-gfm-copy-success-border: rgba(26, 127, 55, 0.3) !important;
}

@media (prefers-color-scheme: light) {
	/* フロントエンドのみライトテーマ適用 */
	:root:not(.wp-admin) {
		--wp-gfm-code-bg: #f6f8fa;
		--wp-gfm-copy-text: #24292f;
		--wp-gfm-copy-bg: rgba(255, 255, 255, 0.8);
		--wp-gfm-copy-border: rgba(31, 35, 40, 0.15);
		--wp-gfm-copy-text-hover: #24292f;
		--wp-gfm-copy-bg-hover: #fff;
		--wp-gfm-copy-border-hover: rgba(31, 35, 40, 0.25);
		--wp-gfm-copy-focus: #0969da;
		--wp-gfm-copy-success-text: #1a7f37;
		--wp-gfm-copy-success-bg: rgba(26, 127, 55, 0.1);
		--wp-gfm-copy-success-border: rgba(26, 127, 55, 0.3);
	}
}

/* Explicit light theme class */
.wp-gfm-theme-light {
	--wp-gfm-code-bg: #f6f8fa;

	/* --wp-gfm-code-border removed - no border used */

	--wp-gfm-copy-text: #24292f;
	--wp-gfm-copy-bg: rgba(255, 255, 255, 0.8);
	--wp-gfm-copy-border: rgba(31, 35, 40, 0.15);

	--wp-gfm-copy-text-hover: #24292f;
	--wp-gfm-copy-bg-hover: #fff;
	--wp-gfm-copy-border-hover: rgba(31, 35, 40, 0.25);

	--wp-gfm-copy-focus: #0969da;

	--wp-gfm-copy-success-text: #1a7f37;
	--wp-gfm-copy-success-bg: rgba(26, 127, 55, 0.1);
	--wp-gfm-copy-success-border: rgba(26, 127, 55, 0.3);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Mobile optimizations */
@media (max-width: 768px) {

	.wp-gfm-copy-button {
		padding: 5px 8px;
		font-size: 10px;
		top: 8px;
		right: 4px; /* デスクトップとの一貫性を保持 */
		min-width: 40px; /* モバイル用最小幅 */
		opacity: 0.8; /* デスクトップと統一 */
	}

	.wp-gfm-copy-button:hover,
	.wp-gfm-copy-button:focus-visible {
		opacity: 1;
	}
}

/* Small mobile devices */
@media (max-width: 480px) {

	.wp-gfm-copy-button {
		padding: 4px 6px;
		font-size: 9px;
		top: 6px;
		right: 3px; /* 小画面用調整 */
		min-width: 36px; /* 小画面用最小幅 */
	}
}

/* ==========================================================================
   High Contrast Support
   ========================================================================== */

@media (prefers-contrast: high) {

	.wp-gfm-copy-button {
		border-width: 2px;
		background: var(--wp-gfm-copy-bg-high-contrast, #000);
		color: var(--wp-gfm-copy-text-high-contrast, #fff);
		border-color: var(--wp-gfm-copy-border-high-contrast, #fff);
	}

	.wp-gfm-copy-button:hover {
		background: var(--wp-gfm-copy-bg-hover-high-contrast, #333);
	}

	.wp-gfm-copy-button:focus-visible {
		outline-width: 3px;
	}
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.wp-gfm-copy-button {
		transition: opacity 0.1s ease;
		transform: none;
	}

	.wp-gfm-copy-button:hover {
		transform: none;
	}

	.wp-gfm-copy-icon {
		transition: none;
	}

	.wp-gfm-copy-button:hover .wp-gfm-copy-icon {
		transform: none;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {

	.wp-gfm-copy-button {
		display: none !important;
	}
}

/* ==========================================================================
   Code Block Border Override - Complete Removal
   ========================================================================== */

/* 最強の優先度でコードブロックのborderを完全削除 */
.wp-gfm-code-container pre,
.wp-gfm-code-container pre.shiki,
.wp-gfm-code-container .shiki,
.wp-gfm-code-container code,
.wp-gfm-markdown-container pre,
.wp-gfm-markdown-rendered pre,
.wp-block-html pre,
.wp-block-code pre,
pre.shiki,
.shiki,
.shiki pre,
.shiki code,
pre[class*="language-"],
code[class*="language-"],
.wp-gfm-shiki-processed,
.wp-gfm-shiki-enhanced pre,
.highlight pre,
.highlight code {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* 特定的なWordPressテーマ対応 */
.entry-content pre,
.post-content pre,
.content pre,
article pre,
.wp-block-code,
.wp-block-html pre {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Shiki特有のスタイルオーバーライド */
.shiki,
.shiki pre,
.shiki code,
pre.shiki,
code.shiki {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* 最高優先度での強制上書き - あらゆるテーマとの競合を防ぐ */
*:is(pre, code):is(.shiki, [class*="language-"], [data-language], .wp-gfm-shiki-processed),
*:is(.wp-gfm-code-container, .wp-gfm-markdown-container, .wp-block-html, .wp-block-code) *:is(pre, code),
.highlight *:is(pre, code),
.hljs,
.hljs *,
pre.highlight,
code.highlight {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ユーザーエージェントスタイルとテーマ上書き対策 */
pre[style*="border"],
code[style*="border"],
.shiki[style*="border"],
.wp-gfm-code-container pre[style*="border"] {
	border: none !important;
}

/* 疑似要素によるborderも無効化 */
.wp-gfm-code-container pre::before,
.wp-gfm-code-container pre::after,
.shiki::before,
.shiki::after,
pre.shiki::before,
pre.shiki::after {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   Force Border Removal - Override All Possible Sources
   ========================================================================== */

/* Border color matching background - make borders invisible */
pre,
code,
.wp-gfm-code-container,
.wp-gfm-code-container pre,
.wp-gfm-markdown-container pre,
.wp-gfm-markdown-rendered pre,
.wp-block-html pre,
.wp-block-code pre,
[class*="language-"]:not(.shiki):not(.shiki *),
.wp-gfm-shiki-processed,
.entry-content pre,
.post-content pre,
.content pre,
article pre {

	/* Primary approach: remove borders completely */
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	outline: none !important;

	/* Force transparent borders if they can't be removed */
	border-color: transparent !important;
	outline-color: transparent !important;
}

/* Shiki elements - lighter touch to preserve colors */
.shiki,
pre.shiki,
.shiki pre,
.shiki code,
.shiki span {
	/* Only remove borders, preserve colors */
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	outline: none !important;
	
	/* DO NOT override background-color or color for Shiki elements */
}

/* Also remove borders from inline code */
code:not(pre code),
.wp-gfm-markdown-container code:not(pre code),
.wp-gfm-markdown-rendered code:not(pre code) {
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	outline: none !important;
}

/* Remove any inherited borders from containers */
.wp-gfm-code-container,
.wp-gfm-markdown-container,
.wp-gfm-markdown-rendered,
.shiki-container,
.code-container {
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	outline: none !important;
}

/* Specific overrides for common WordPress and theme borders */
.wp-gfm-code-container,
.wp-gfm-code-container pre,
.wp-gfm-markdown-rendered pre {

	/* Dark theme - match background */
	border: 1px solid var(--wp-gfm-code-bg, #0d1117) !important;
	box-shadow: none !important;
}

/* Light theme overrides */
@media (prefers-color-scheme: light) {

	.wp-gfm-code-container,
	.wp-gfm-code-container pre,
	.wp-gfm-markdown-rendered pre {
		border: 1px solid #f6f8fa !important;
		border-color: #f6f8fa !important;
	}
}

/* Theme-specific overrides */
.wp-gfm-theme-light .wp-gfm-code-container,
.wp-gfm-theme-light .wp-gfm-code-container pre,
.wp-gfm-theme-light .wp-gfm-markdown-rendered pre {
	border: 1px solid #f6f8fa !important;
	border-color: #f6f8fa !important;
}

/* ==========================================================================
   Integration with existing Shiki styles
   ========================================================================== */

/* Ensure compatibility with Shiki-generated code blocks */
.shiki .wp-gfm-copy-button,
.shiki-container .wp-gfm-copy-button,
pre.shiki .wp-gfm-copy-button,
.wp-gfm-markdown-rendered .shiki .wp-gfm-copy-button,
.wp-gfm-markdown-container .shiki .wp-gfm-copy-button {
	z-index: 50; /* Higher than most syntax highlighting layers */
	position: absolute;
	top: 12px;
	right: 6px; /* メインボタンと統一 */
}

/* Integration with existing markdown containers */
.wp-gfm-markdown-container pre,
.wp-gfm-markdown-rendered pre,
.wp-block-html pre {
	position: relative;
}

/* ==========================================================================
   Force Shiki Color Preservation - Override WordPress and Theme CSS
   ========================================================================== */

/* Shikiのインライン色指定を最優先で保護 - 適切な実装 */
.shiki span[style*="color"],
.shiki code[style*="color"],
pre.shiki span[style*="color"],
pre.shiki code[style*="color"],
.wp-gfm-code-container .shiki span[style*="color"],
.wp-gfm-markdown-container .shiki span[style*="color"],
.wp-gfm-markdown-rendered .shiki span[style*="color"] {
	/* 
	 * 重要：Shikiのインライン色を確実に適用するための空ルール
	 * WordPressテーマのCSS specificity を上書きして、inline style を優先
	 */
}

/* コードブロックの基本的な見た目を復旧 */
.wp-gfm-code-container,
.wp-gfm-markdown-rendered pre,
.wp-gfm-markdown-container pre {
	/* 通常のコードブロック背景色を復旧 */
	background-color: var(--wp-gfm-code-bg, #f6f8fa) !important;
	border-radius: 6px;
	padding: 16px;
	margin: 16px 0;
	position: relative; /* コピーボタン用 */
}

/* Shikiコードブロックの背景色を明示的に適用 */
.wp-gfm-markdown-rendered .shiki,
.wp-gfm-markdown-rendered pre.shiki,
.wp-gfm-markdown-container .shiki,
.wp-gfm-markdown-container pre.shiki {
	background-color: var(--wp-gfm-code-bg, #f6f8fa) !important;
	border: none !important;
	box-shadow: none !important;
}

/* WordPressテーマの強制色指定をリセット（Shiki要素以外） */
.entry-content pre:not(.shiki) code,
.post-content pre:not(.shiki) code,
.content pre:not(.shiki) code,
article pre:not(.shiki) code {
	/* 非Shiki要素のみテーマ色をリセット */
	color: inherit;
}

/* 最高優先度でShikiの背景色のみ保護 - 文字色はShikiのインライン指定を優先 */
.shiki,
.shiki code,
.shiki span,
pre.shiki,
pre.shiki code,
pre.shiki span,
.wp-gfm-code-container .shiki,
.wp-gfm-code-container .shiki code,
.wp-gfm-code-container .shiki span,
.wp-gfm-markdown-container .shiki,
.wp-gfm-markdown-container .shiki code,
.wp-gfm-markdown-container .shiki span,
.wp-gfm-markdown-rendered .shiki,
.wp-gfm-markdown-rendered .shiki code,
.wp-gfm-markdown-rendered .shiki span,
.wp-block-html .shiki,
.wp-block-html .shiki code,
.wp-block-html .shiki span,
.entry-content .shiki,
.entry-content .shiki code,
.entry-content .shiki span,
.post-content .shiki,
.post-content .shiki code,
.post-content .shiki span,
.content .shiki,
.content .shiki code,
.content .shiki span,
article .shiki,
article .shiki code,
article .shiki span {
	/* 背景色継承も一時的に無効化して問題を確認 */
	/* color: inherit !important; ← 削除：Shikiの色を上書きしていた原因 */
	/* background-color: inherit !important; ← 一時的に無効化：背景問題の確認 */
}

/* スタイル属性を持つShiki要素の強制上書き - 最優先 */
.shiki[style*="color"],
.shiki code[style*="color"],
.shiki span[style*="color"],
pre.shiki[style*="color"],
pre.shiki code[style*="color"],
pre.shiki span[style*="color"],
.wp-gfm-code-container .shiki[style*="color"],
.wp-gfm-code-container .shiki code[style*="color"],
.wp-gfm-code-container .shiki span[style*="color"],
.wp-gfm-markdown-container .shiki[style*="color"],
.wp-gfm-markdown-container .shiki code[style*="color"],
.wp-gfm-markdown-container .shiki span[style*="color"],
.wp-gfm-markdown-rendered .shiki[style*="color"],
.wp-gfm-markdown-rendered .shiki code[style*="color"],
.wp-gfm-markdown-rendered .shiki span[style*="color"] {
	/* 
	 * 重要：Shikiのインライン色指定（style="color: #xxx"）を最優先で保護
	 * WordPressテーマのCSS specificityに負けないよう、空ルールでinline styleを優先
	 * これにより、Shikiが生成したインライン色が確実に表示される
	 */
}

/* WordPressテーマの一般的なコードスタイルをShiki用に無効化 */
/* Shiki以外のコードブロックのみ対象とし、Shikiの色を保護 */
pre code:not(.shiki):not(.shiki *),
.entry-content pre code:not(.shiki):not(.shiki *),
.post-content pre code:not(.shiki):not(.shiki *),
.content pre code:not(.shiki):not(.shiki *),
article pre code:not(.shiki):not(.shiki *),
.wp-block-code code:not(.shiki):not(.shiki *),
.wp-block-html pre code:not(.shiki):not(.shiki *) {
	/* 非Shikiコンテナ内でのみ色の上書きを無効化 */
	color: inherit !important;
}

/* 高いspecificityでWordPressテーマのShiki色上書きを防ぐ */
.wp-gfm-markdown-rendered .shiki,
.wp-gfm-markdown-rendered .shiki code,
.wp-gfm-markdown-rendered .shiki span,
.entry-content .wp-gfm-markdown-rendered .shiki,
.entry-content .wp-gfm-markdown-rendered .shiki code,
.entry-content .wp-gfm-markdown-rendered .shiki span,
.post-content .wp-gfm-markdown-rendered .shiki,
.post-content .wp-gfm-markdown-rendered .shiki code,
.post-content .wp-gfm-markdown-rendered .shiki span,
.content .wp-gfm-markdown-rendered .shiki,
.content .wp-gfm-markdown-rendered .shiki code,
.content .wp-gfm-markdown-rendered .shiki span,
article .wp-gfm-markdown-rendered .shiki,
article .wp-gfm-markdown-rendered .shiki code,
article .wp-gfm-markdown-rendered .shiki span {
	/*
	 * 重要：WordPressテーマの一般的なセレクターを上回るspecificityで
	 * Shikiのインライン色指定を確実に保護
	 * 空ルールによりinline styleの優先度を最大化
	 */
}

/* Shikiコンテナ内のすべての要素でインライン色を保護 */
.shiki *,
pre.shiki *,
.wp-gfm-code-container .shiki *,
.wp-gfm-markdown-container .shiki *,
.wp-gfm-markdown-rendered .shiki * {
	/*
	 * 重要：Shikiのインライン色指定を確実に保護
	 * WordPressテーマが強制的に color: inherit を適用するのを防ぐ
	 * 空ルールにより、inline styleの優先度を確保
	 */
}

/* 疑似要素でもShiki色を保護 */
.shiki::before,
.shiki::after,
.shiki code::before,
.shiki code::after,
.shiki span::before,
.shiki span::after,
pre.shiki::before,
pre.shiki::after,
pre.shiki code::before,
pre.shiki code::after,
pre.shiki span::before,
pre.shiki span::after {
	/*
	 * 疑似要素でもShikiのインライン色を保護
	 * テーマによる疑似要素への色干渉を防ぐ
	 */
}

/* ==========================================================================
   Tooltip Support (Optional Enhancement)
   ========================================================================== */

.wp-gfm-copy-button[title]::after {
	content: attr(title);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;

	/* Tooltip styling */
	padding: 4px 8px;
	background: var(--wp-gfm-tooltip-bg, #1c1c1c);
	color: var(--wp-gfm-tooltip-text, #fff);
	font-size: 11px;
	border-radius: 4px;
	white-space: nowrap;

	/* Animation */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 30;
}

.wp-gfm-copy-button:hover[title]::after {
	opacity: 1;
}

/* Arrow for tooltip */
.wp-gfm-copy-button[title]::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 2px;

	border: 4px solid transparent;
	border-top-color: var(--wp-gfm-tooltip-bg, #1c1c1c);

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 30;
}

.wp-gfm-copy-button:hover[title]::before {
	opacity: 1;
}