/**
 * css/components/edit-link.css
 * ============================================================
 * A LEGEND 2：Edit Link
 * ============================================================
 *
 * 役割：
 * - template-parts/components/edit-link.php が出力するフロント編集リンクを装飾します。
 * - 投稿詳細メタ行、固定ページヘッダーなど、複数の詳細文脈で共通利用します。
 *
 * 設計方針：
 * - 編集リンクは公開ユーザー向けCTAではなく、編集権限を持つユーザー向けの補助導線です。
 *   そのため、派手なボタンではなく既存メタチップに近い控えめな見た目にします。
 * - 固定色・固定角丸・固定影を避け、Design Token / Theme CSS Variables へ接続します。
 * - hover / focus-visible / print をこのコンポーネント内で完結させます。
 */

/* ------------------------------------------------------------
 * Base
 * ------------------------------------------------------------
 *
 * 詳細メタのチップUIに寄せた共通編集リンクです。
 * single-meta.css と page.css のどちらにも依存しすぎないよう、
 * このコンポーネント単体で最低限の見た目を持ちます。
 */
.aleg2-edit-link {
	display: inline-flex;
	gap: 0.36em;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 0.34em 0.82em;
	color: var(--aleg2-color-text-muted);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	line-height: 1;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-decoration: none;
	text-transform: uppercase;
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-button);
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		background var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

/**
 * アイコン。
 *
 * aria-hidden="true" の装飾アイコンです。
 * テキストラベルは必ずHTML側に残すため、アイコンだけに依存しません。
 */
.aleg2-edit-link__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95em;
	line-height: 1;
	transform: translateY(-0.02em);
}

/**
 * ラベル。
 *
 * 将来「投稿を編集」「ページを編集」などへ文言が伸びても、
 * flex itemとして自然に収まるようにします。
 */
.aleg2-edit-link__label {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

/* ------------------------------------------------------------
 * States
 * ------------------------------------------------------------
 *
 * 管理導線として見つけやすくしつつ、公開CTAのように強く主張しすぎない状態変化にします。
 */
.aleg2-edit-link:hover {
	color: var(--aleg2-color-on-primary);
	text-decoration: none;
	background: var(--aleg2-color-primary);
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-soft);
}

.aleg2-edit-link:focus-visible {
	outline: none;
	color: var(--aleg2-color-on-primary);
	background: var(--aleg2-color-primary);
	border-color: var(--aleg2-color-primary);
	box-shadow:
		var(--aleg2-shadow-soft),
		var(--aleg2-focus-ring);
}

/**
 * hover lift設定連動。
 *
 * 既存ボタン/メタリンクと同じく、body classが有効な場合だけ浮き上がりを付けます。
 */
body.aleg2-buttons-hover-lift .aleg2-edit-link:hover {
	transform: translateY(calc(var(--aleg2-button-hover-amount) * -1));
}

/* ------------------------------------------------------------
 * Context modifiers
 * ------------------------------------------------------------
 *
 * 同じコンポーネントを複数文脈で使うため、文脈差分はmodifierで最小限に留めます。
 */
.aleg2-edit-link--single-meta,
.aleg2-edit-link--in-single-meta {
	margin-inline-start: 0;
}

.aleg2-edit-link--page-header,
.aleg2-edit-link--in-page-header {
	margin-top: 0;
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * スマホではメタ行が詰まりやすいため、既存single-metaのチップ寸法に合わせます。
 */
@media (max-width: 640px) {
	.aleg2-edit-link {
		min-height: 26px;
		padding-inline: 0.72em;
	}
}

/* ------------------------------------------------------------
 * Print
 * ------------------------------------------------------------
 *
 * 編集リンクは管理画面へ移動するための操作UIなので、印刷時には不要です。
 */
@media print {
	.aleg2-edit-link {
		display: none !important;
	}
}