/**
 * No.01 ボタン / No.14 リンクテキスト。
 *
 * フロントの <a> は render_block で .btn / [data-size] / [data-variant] / [data-role] を付与する。
 * コアの .wp-block-button .wp-block-button__link より後に読み込み、
 * 親 .wp-block-button は特異度合わせのためだけに使う（a 自体は .btn でフック）。
 *
 * エディタでは内側の <a> に .btn が付かないため、[data-btn-size] 経由で同等の見た目を当てる。
 */

.wp-block-button .btn {
	--sumida-btn-pad: var(--wp--custom--atom--md);
	--sumida-btn-gap: var(--wp--custom--atom--md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
	 * inline-flex のベースラインは先頭フレックス子に依存する。
	 * before（icon 先頭）と after（label 先頭）で兄弟間の縦位置がずれるため、
	 * 行ボックス内では middle で揃える。
	 */
	vertical-align: middle;
	box-sizing: border-box;
	position: relative;
	width: auto;
	max-width: 100%;
	padding: var(--sumida-btn-pad);
	gap: var(--sumida-btn-gap);
	font-family: var(--wp--preset--font-family--jp-sans);
	font-size: var(--wp--preset--font-size--text-sm);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--regular);
	letter-spacing: var(--wp--custom--letter-spacing--none);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

/* アイコンサイズはボタンの font-size に連動（1.5em ≈ text-xs 時 1.125rem / text-md 時 1.5rem） */
.wp-block-button .btn .icon {
	inline-size: var(--wp--custom--icon--size, 1.5em);
	block-size: var(--wp--custom--icon--size, 1.5em);
}

.wp-block-button .btn:focus {
	outline: none;
}

.wp-block-button .btn[data-size="hug"] {
	--sumida-btn-pad: var(--wp--custom--atom--lg);
	--sumida-btn-gap: var(--wp--custom--atom--lg);
	min-width: 0;
	max-width: min(100%, var(--wp--custom--sizing--button-max--md));
	font-size: var(--wp--preset--font-size--text-md);
}

.wp-block-button .btn[data-size="xxs"] {
	--sumida-btn-pad: var(--wp--custom--atom--sm);
	--sumida-btn-gap: var(--wp--custom--atom--sm);
	min-width: var(--wp--custom--sizing--button-min--xxs);
	max-width: min(100%, var(--wp--custom--sizing--button-max--xxs));
	font-size: var(--wp--preset--font-size--text-xs);
}

.wp-block-button .btn[data-size="xs"] {
	--sumida-btn-pad: var(--wp--custom--atom--rg);
	--sumida-btn-gap: var(--wp--custom--atom--rg);
	min-width: var(--wp--custom--sizing--button-min--xs);
	max-width: min(100%, var(--wp--custom--sizing--button-max--xs));
	font-size: var(--wp--preset--font-size--text-xs);
}

.wp-block-button .btn[data-size="sm"] {
	--sumida-btn-pad: var(--wp--custom--atom--md);
	--sumida-btn-gap: var(--wp--custom--atom--md);
	min-width: var(--wp--custom--sizing--button-min--sm);
	max-width: min(100%, var(--wp--custom--sizing--button-max--sm));
	font-size: var(--wp--preset--font-size--text-sm);
}

.wp-block-button .btn[data-size="md"] {
	--sumida-btn-pad: var(--wp--custom--atom--lg);
	--sumida-btn-gap: var(--wp--custom--atom--lg);
	min-width: var(--wp--custom--sizing--button-min--md);
	max-width: min(100%, var(--wp--custom--sizing--button-max--md));
	font-size: var(--wp--preset--font-size--text-md);
}

.wp-block-button .btn[data-size="lg"] {
	--sumida-btn-pad: var(--wp--custom--atom--xl);
	--sumida-btn-gap: var(--wp--custom--atom--xl);
	min-width: var(--wp--custom--sizing--button-min--lg);
	max-width: min(100%, var(--wp--custom--sizing--button-max--lg));
	font-size: var(--wp--preset--font-size--text-lg);
}

.wp-block-button .btn[data-size="xl"] {
	--sumida-btn-pad: var(--wp--custom--atom--xxl);
	--sumida-btn-gap: var(--wp--custom--atom--xxl);
	min-width: var(--wp--custom--sizing--button-min--xl);
	max-width: min(100%, var(--wp--custom--sizing--button-max--xl));
	font-size: var(--wp--preset--font-size--text-xl);
}

/* left/right は data-icon-position のみ（icon--* Modifier は廃止）。 */
.wp-block-button .btn[data-icon-position="left"],
.wp-block-button .btn[data-icon-position="right"] {
	padding-inline: calc(
		var(--sumida-btn-pad) + var(--wp--custom--icon--size, 1.5em) + var(--sumida-btn-gap)
	);
}

.wp-block-button .btn[data-icon-position="left"] .icon,
.wp-block-button .btn[data-icon-position="right"] .icon {
	position: absolute;
	/* 50% 中央 + .icon の光学オフセット（icons.css の --icon-optical-offset-y） */
	top: calc(50% + var(--icon-optical-offset-y, 0.0625em));
	transform: translateY(-50%);
}

.wp-block-button .btn[data-icon-position="left"] .icon {
	left: var(--sumida-btn-pad);
}

.wp-block-button .btn[data-icon-position="right"] .icon {
	right: var(--sumida-btn-pad);
}

/*
 * fill = 塗り（青背景＋白文字）、outline = 白地（白背景＋青枠・青文字）。
 * --hover-invert-a = 静止時の背景（＝ホバー時の文字色）
 * --hover-invert-b = 静止時の文字色（＝ホバー時の背景）
 * 効果本体は hover.css。旧 primary（白地）/ secondary（塗り）は互換セレクタ。
 */
.btn[data-variant="fill"],
.wp-block-button.is-style-fill :is(.btn, .wp-block-button__link),
.wp-block-button.is-style-secondary :is(.btn, .wp-block-button__link) {
	--hover-invert-a: var(--wp--preset--color--logo-blue);
	--hover-invert-b: var(--wp--preset--color--base-white);
	background-color: var(--hover-invert-a);
	background-image: none;
	border-color: var(--hover-invert-a);
	border-width: var(--wp--custom--border-width--thin);
	border-style: solid;
	color: var(--hover-invert-b);
	box-shadow: none;
	text-decoration: none;
}

.btn[data-variant="outline"],
.wp-block-button.is-style-outline :is(.btn, .wp-block-button__link),
.wp-block-button.is-style-primary :is(.btn, .wp-block-button__link) {
	--hover-invert-a: var(--wp--preset--color--base-white);
	--hover-invert-b: var(--wp--preset--color--logo-blue);
	background-color: var(--hover-invert-a);
	background-image: none;
	border-color: var(--hover-invert-b);
	border-width: var(--wp--custom--border-width--thin);
	border-style: solid;
	color: var(--hover-invert-b);
	box-shadow: none;
	text-decoration: none;
}

/*
 * 静止スタイル（.wp-block-button.is-style-* .btn）より特異度を上げて invert を効かせる。
 * 値の定義は hover.css と同じ（--hover-invert-a/b）。
 */

/* bg-slide 時は本体 bg を据え置き（スライド擬似要素側で色を出す） */

/*
 * エディタ: 内側 <a> に data-hover が付かないため、
 * ラッパーの data-hover-* をトリガーに子リンクへ invert を伝える。
 */
.block-editor-block-list__block[data-hover-bg="invert"]:focus-within .wp-block-button__link {
	background-color: var(--hover-invert-b);
}

/*
 * エディタ: アイコンが ::before/::after を使うため、bg-slide は background-size で近似。
 * ラッパーに data-hover-bg-slide、見た目は子リンクへ。
 */
.block-editor-block-list__block[data-hover-bg-slide] .wp-block-button__link {
	isolation: isolate;
	overflow: hidden;
	background-repeat: no-repeat;
	transition:
		background-color var(--hover-duration, 0.3s),
		background-size var(--hover-duration, 0.3s),
		color var(--hover-duration, 0.3s),
		border-color var(--hover-duration, 0.3s);
}

.block-editor-block-list__block[data-hover-bg-slide="ltr"] .wp-block-button__link {
	background-image: linear-gradient(var(--hover-invert-b), var(--hover-invert-b));
	background-size: 0% 100%;
	background-position: left center;
}

.block-editor-block-list__block[data-hover-bg-slide="rtl"] .wp-block-button__link {
	background-image: linear-gradient(var(--hover-invert-b), var(--hover-invert-b));
	background-size: 0% 100%;
	background-position: right center;
}

.block-editor-block-list__block[data-hover-bg-slide="center"] .wp-block-button__link {
	background-image: linear-gradient(var(--hover-invert-b), var(--hover-invert-b));
	background-size: 0% 100%;
	background-position: center center;
}

.block-editor-block-list__block[data-hover-bg-slide]:focus-within .wp-block-button__link {
	background-size: 100% 100%;
}

.block-editor-block-list__block[data-hover-bg-slide][data-hover-bg="invert"]:focus-within .wp-block-button__link {
	background-color: var(--hover-invert-a);
}

.block-editor-block-list__block[data-hover-text="invert"]:focus-within .wp-block-button__link {
	color: var(--hover-invert-a);
}

.block-editor-block-list__block[data-hover-border="invert"]:focus-within .wp-block-button__link {
	border-color: var(--hover-invert-border, var(--hover-invert-a));
}

.block-editor-block-list__block[data-hover-icon-color="invert"]:focus-within .wp-block-button__link {
	/* 疑似要素アイコンは currentColor 依存 */
	color: var(--hover-invert-a);
}

/*
 * フォームの送信（roll=send / spinner）。Figma btn--default 186:4403（3199:56246 ほか）。
 * 静止は白地・灰の枠・黒文字、ホバーは logo-blue の塗り（outline の invert を流用し、枠だけ行先を青に）。
 * 送信中（spinner）は disabled と同じ見た目で、アイコンだけ回す。
 */
.wp-block-button .btn:is([data-role="send"], [data-role="spinner"]) {
	--hover-invert-border: var(--wp--preset--color--logo-blue);
	border-color: var(--wp--preset--color--line-grey);
	color: var(--wp--preset--color--base-black);
}

.wp-block-button .btn[data-role="spinner"] .icon[data-icon="spinner"] svg {
	animation: sumida-btn-spinner 1s linear infinite;
}

@keyframes sumida-btn-spinner {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button .btn[data-role="spinner"] .icon[data-icon="spinner"] svg {
		animation: none;
	}
}

.wp-block-button .btn[data-state="disabled"],
.wp-block-button .btn:disabled {
	background-color: color-mix(in srgb, var(--wp--preset--color--base-white) 30%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--line-grey) 30%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--base-black) 30%, transparent);
	pointer-events: none;
	cursor: not-allowed;
}

.wp-block-button.is-style-link {
	width: auto;
	vertical-align: middle;
	/* 本文 line-height:relax(2) の行ボックスを作らない。高さは内側リンクに任せる */
	line-height: 0;
}

.wp-block-button.is-style-link :is(.btn, .wp-block-button__link) {
	--sumida-btn-pad: 0px;
	--sumida-btn-gap: var(--wp--custom--atom--xs);
	min-width: 0;
	max-width: none;
	width: auto;
	padding: 0;
	vertical-align: middle;
	background: transparent;
	background-image: none;
	border-color: transparent;
	border-width: 0;
	border-radius: 0;
	color: var(--wp--preset--color--base-black);
	font-size: var(--wp--preset--font-size--text-md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--narrow);
	box-shadow: none;
}

/* icon-move 付きはキーフレーム側に任せる（単純 translate と衝突させない） */
.wp-block-button.is-style-link .btn:not([data-hover-icon-move])[data-icon-position="after"] .icon {
	transition: transform 0.2s ease;
}

.wp-block-button.has-custom-width .btn,
.wp-block-button[class*="wp-block-button__width"] .btn {
	min-width: 0;
	max-width: none;
	width: auto;
}

/* エディタ: 内側 <a> に .btn が付かないため、ブロックラッパーの data 属性で同等の見た目を当てる。 */
.block-editor-block-list__block[data-btn-size] .wp-block-button__link {
	--sumida-btn-pad: var(--wp--custom--atom--md);
	--sumida-btn-gap: var(--wp--custom--atom--md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	width: auto;
	max-width: 100%;
	padding: var(--sumida-btn-pad);
	gap: var(--sumida-btn-gap);
	font-family: var(--wp--preset--font-family--jp-sans);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--regular);
	letter-spacing: var(--wp--custom--letter-spacing--none);
	text-decoration: none;
	text-align: center;
}

.block-editor-block-list__block[data-btn-size="hug"] .wp-block-button__link {
	--sumida-btn-pad: var(--wp--custom--atom--lg);
	--sumida-btn-gap: var(--wp--custom--atom--lg);
	min-width: 0;
	max-width: min(100%, var(--wp--custom--sizing--button-max--md));
	width: auto;
	padding: var(--sumida-btn-pad);
	gap: var(--sumida-btn-gap);
	font-size: var(--wp--preset--font-size--text-md);
}

.block-editor-block-list__block[data-btn-size="xxs"] .wp-block-button__link {
	--sumida-btn-pad: var(--wp--custom--atom--sm);
	--sumida-btn-gap: var(--wp--custom--atom--sm);
	min-width: var(--wp--custom--sizing--button-min--xxs);
	max-width: min(100%, var(--wp--custom--sizing--button-max--xxs));
	padding: var(--sumida-btn-pad);
	gap: var(--sumida-btn-gap);
	font-size: var(--wp--preset--font-size--text-xs);
}

.block-editor-block-list__block[data-btn-size="xs"] .wp-block-button__link {
	--sumida-btn-pad: var(--wp--custom--atom--rg);
	--sumida-btn-gap: var(--wp--custom--atom--rg);
	min-width: var(--wp--custom--sizing--button-min--xs);
	max-width: min(100%, var(--wp--custom--sizing--button-max--xs));
	padding: var(--sumida-btn-pad);
	gap: var(--sumida-btn-gap);
	font-size: var(--wp--preset--font-size--text-xs);
}

.block-editor-block-list__block[data-btn-size="sm"] .wp-block-button__link {
	--sumida-btn-pad: var(--wp--custom--atom--md);
	--sumida-btn-gap: var(--wp--custom--atom--md);
	min-width: var(--wp--custom--sizing--button-min--sm);
	max-width: min(100%, var(--wp--custom--sizing--button-max--sm));
	padding: var(--sumida-btn-pad);
	gap: var(--sumida-btn-gap);
	font-size: var(--wp--preset--font-size--text-sm);
}

.block-editor-block-list__block[data-btn-size="md"] .wp-block-button__link {
	--sumida-btn-pad: var(--wp--custom--atom--lg);
	--sumida-btn-gap: var(--wp--custom--atom--lg);
	min-width: var(--wp--custom--sizing--button-min--md);
	max-width: min(100%, var(--wp--custom--sizing--button-max--md));
	padding: var(--sumida-btn-pad);
	gap: var(--sumida-btn-gap);
	font-size: var(--wp--preset--font-size--text-md);
}

.block-editor-block-list__block[data-btn-size="lg"] .wp-block-button__link {
	--sumida-btn-pad: var(--wp--custom--atom--xl);
	--sumida-btn-gap: var(--wp--custom--atom--xl);
	min-width: var(--wp--custom--sizing--button-min--lg);
	max-width: min(100%, var(--wp--custom--sizing--button-max--lg));
	padding: var(--sumida-btn-pad);
	gap: var(--sumida-btn-gap);
	font-size: var(--wp--preset--font-size--text-lg);
}

.block-editor-block-list__block[data-btn-size="xl"] .wp-block-button__link {
	--sumida-btn-pad: var(--wp--custom--atom--xxl);
	--sumida-btn-gap: var(--wp--custom--atom--xxl);
	min-width: var(--wp--custom--sizing--button-min--xl);
	max-width: min(100%, var(--wp--custom--sizing--button-max--xl));
	padding: var(--sumida-btn-pad);
	gap: var(--sumida-btn-gap);
	font-size: var(--wp--preset--font-size--text-xl);
}

.block-editor-block-list__block[data-icon-position="before"] .wp-block-button__link::before,
.block-editor-block-list__block[data-icon-position="after"] .wp-block-button__link::after,
.block-editor-block-list__block[data-icon-position="left"] .wp-block-button__link::before,
.block-editor-block-list__block[data-icon-position="right"] .wp-block-button__link::after {
	content: "";
	display: block;
	flex-shrink: 0;
	inline-size: var(--wp--custom--icon--size, 1.5em);
	block-size: var(--wp--custom--icon--size, 1.5em);
	background-color: currentColor;
	mask: var(--sumida-button-icon) center / contain no-repeat;
	-webkit-mask: var(--sumida-button-icon) center / contain no-repeat;
}

.block-editor-block-list__block[data-icon-position="left"] .wp-block-button__link,
.block-editor-block-list__block[data-icon-position="right"] .wp-block-button__link {
	position: relative;
	padding-inline: calc(
		var(--sumida-btn-pad) + var(--wp--custom--icon--size, 1.5em) + var(--sumida-btn-gap)
	);
}

.block-editor-block-list__block[data-icon-position="left"] .wp-block-button__link::before,
.block-editor-block-list__block[data-icon-position="right"] .wp-block-button__link::after {
	position: absolute;
	top: calc(50% + var(--wp--custom--icon--optical-offset-y, 0.0625em));
	transform: translateY(-50%);
}

.block-editor-block-list__block[data-icon-position="left"] .wp-block-button__link::before {
	left: var(--sumida-btn-pad);
}

.block-editor-block-list__block[data-icon-position="right"] .wp-block-button__link::after {
	right: var(--sumida-btn-pad);
}

.block-editor-block-list__block.is-style-link[data-btn-size] .wp-block-button__link {
	--sumida-btn-pad: 0px;
	--sumida-btn-gap: var(--wp--custom--atom--xs);
	min-width: 0;
	max-width: none;
	width: auto;
	padding: 0;
	background: transparent;
	background-image: none;
	border-color: transparent;
	border-width: 0;
	color: var(--wp--preset--color--base-black);
	box-shadow: none;
}

.block-editor-block-inspector [aria-label="Button width"],
.block-editor-block-inspector [aria-label="ボタンの幅"],
.block-editor-block-inspector .wp-block-button__width,
.block-editor-block-inspector .components-tools-panel-item:has([aria-label="Button width"]),
.block-editor-block-inspector .components-tools-panel-item:has([aria-label="ボタンの幅"]) {
	display: none !important;
}

/* :focus-visible（常時有効） */
.wp-block-button .btn:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.btn[data-variant="fill"]:focus-visible,
.btn[data-variant="outline"]:focus-visible,
.wp-block-button.is-style-primary :is(.btn, .wp-block-button__link):focus-visible,
.wp-block-button.is-style-fill :is(.btn, .wp-block-button__link):focus-visible,
.wp-block-button.is-style-secondary :is(.btn, .wp-block-button__link):focus-visible,
.wp-block-button.is-style-outline :is(.btn, .wp-block-button__link):focus-visible {
	text-decoration: none;
}

.wp-block-button .btn[data-hover-bg="invert"]:focus-visible {
	background-color: var(--hover-invert-b);
}

.wp-block-button .btn[data-hover-bg-slide][data-hover-bg="invert"]:focus-visible {
	background-color: var(--hover-invert-a);
}

.wp-block-button .btn[data-hover-text="invert"]:focus-visible {
	color: var(--hover-invert-a);
}

.wp-block-button .btn[data-hover-border="invert"]:focus-visible {
	border-color: var(--hover-invert-border, var(--hover-invert-a));
}

.wp-block-button .btn[data-hover-icon-color="invert"]:focus-visible .icon,
.wp-block-button .btn[data-hover-icon-color="invert"]:focus-visible .icon[data-fill="on"] {
	color: var(--hover-invert-a);
}

@media (hover: hover) and (pointer: fine) {
	.btn[data-variant="fill"]:hover,
	.btn[data-variant="outline"]:hover,
	.wp-block-button.is-style-primary :is(.btn, .wp-block-button__link):hover,
	.wp-block-button.is-style-fill :is(.btn, .wp-block-button__link):hover,
	.wp-block-button.is-style-secondary :is(.btn, .wp-block-button__link):hover,
	.wp-block-button.is-style-outline :is(.btn, .wp-block-button__link):hover {
		text-decoration: none;
	}

	.wp-block-button .btn[data-hover-bg="invert"]:hover {
		background-color: var(--hover-invert-b);
	}

	.wp-block-button .btn[data-hover-bg-slide][data-hover-bg="invert"]:hover {
		background-color: var(--hover-invert-a);
	}

	.wp-block-button .btn[data-hover-text="invert"]:hover {
		color: var(--hover-invert-a);
	}

	.wp-block-button .btn[data-hover-border="invert"]:hover {
		border-color: var(--hover-invert-border, var(--hover-invert-a));
	}

	.wp-block-button .btn[data-hover-icon-color="invert"]:hover .icon,
	.wp-block-button .btn[data-hover-icon-color="invert"]:hover .icon[data-fill="on"] {
		color: var(--hover-invert-a);
	}

	.block-editor-block-list__block[data-hover-bg="invert"]:hover .wp-block-button__link {
		background-color: var(--hover-invert-b);
	}

	.block-editor-block-list__block[data-hover-bg-slide]:hover .wp-block-button__link {
		background-size: 100% 100%;
	}

	.block-editor-block-list__block[data-hover-bg-slide][data-hover-bg="invert"]:hover .wp-block-button__link {
		background-color: var(--hover-invert-a);
	}

	.block-editor-block-list__block[data-hover-text="invert"]:hover .wp-block-button__link {
		color: var(--hover-invert-a);
	}

	.block-editor-block-list__block[data-hover-border="invert"]:hover .wp-block-button__link {
		border-color: var(--hover-invert-border, var(--hover-invert-a));
	}

	.block-editor-block-list__block[data-hover-icon-color="invert"]:hover .wp-block-button__link {
		/* 疑似要素アイコンは currentColor 依存 */
		color: var(--hover-invert-a);
	}

	.wp-block-button.is-style-link :is(.btn, .wp-block-button__link):hover {
		background: transparent;
		border-color: transparent;
		color: var(--wp--preset--color--logo-blue);
		text-decoration: none;
	}

	.wp-block-button.is-style-link .btn:not([data-hover-icon-move])[data-icon-position="after"]:hover .icon {
		transform: translateX(0.125rem);
	}

}