.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
}

/*
 * アイコン（デフォルトは右矢印）
 * ブロックスタイルでアイコンを切り替える
 *   is-style-pungi-anchor   … 下矢印（ページ内リンク）
 *   is-style-pungi-external … 外部リンク
 *   is-style-pungi-download … ダウンロード
 *   is-no-arrow（追加CSSクラス） … アイコンなし
 */
.wp-block-button {
	--pungi-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--pungi-btn-icon-shift: translateX(5px);
}

.wp-block-button.is-style-pungi-anchor {
	--pungi-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
	--pungi-btn-icon-shift: translateY(4px);
}

.wp-block-button.is-style-pungi-external {
	--pungi-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
	--pungi-btn-icon-shift: translate(2px, -2px);
}

.wp-block-button.is-style-pungi-download {
	--pungi-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M4 20h16'/%3E%3C/svg%3E");
	--pungi-btn-icon-shift: translateY(3px);
}

.wp-block-button:not(.is-no-arrow) .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--pungi-btn-icon) center / contain no-repeat;
	mask: var(--pungi-btn-icon) center / contain no-repeat;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wp-block-button:not(.is-no-arrow) .wp-block-button__link:hover::after,
.wp-block-button:not(.is-no-arrow) .wp-block-button__link:focus-visible::after {
	transform: var(--pungi-btn-icon-shift);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.wp-block-button__link::after {
		transition: none;
	}
}

/*
 * ボタンデザイン（ブロックスタイル）
 *   塗り（濃いグレー） … pungi-page / pungi-external / pungi-download
 *   白背景             … pungi-anchor（枠線は unitone の機能で設定）
 */
:is(.is-style-pungi-page, .is-style-pungi-anchor, .is-style-pungi-external, .is-style-pungi-download) {
	--pungi-btn-dark: #333;
}

:is(.is-style-pungi-page, .is-style-pungi-anchor, .is-style-pungi-external, .is-style-pungi-download) .wp-block-button__link {
	gap: 1.5em;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}

:is(.is-style-pungi-page, .is-style-pungi-anchor, .is-style-pungi-external, .is-style-pungi-download) .wp-block-button__link::after {
	width: 0.8em;
	height: 0.8em;
}

:is(.is-style-pungi-page, .is-style-pungi-external, .is-style-pungi-download) .wp-block-button__link {
	background-color: var(--pungi-btn-dark);
	color: #fff;
}

:is(.is-style-pungi-page, .is-style-pungi-external, .is-style-pungi-download) .wp-block-button__link:hover,
:is(.is-style-pungi-page, .is-style-pungi-external, .is-style-pungi-download) .wp-block-button__link:focus-visible {
	background-color: #555;
	color: #fff;
}

.is-style-pungi-anchor .wp-block-button__link {
	background-color: #fff;
	color: var(--pungi-btn-dark);
}

.is-style-pungi-anchor .wp-block-button__link:hover,
.is-style-pungi-anchor .wp-block-button__link:focus-visible {
	background-color: var(--pungi-btn-dark);
	color: #fff;
}

/* 文字と矢印を左右両端に配置するパターン（追加CSSクラス is-arrow-end） */
.wp-block-button.is-arrow-end {
	flex-basis: 100%;
	width: 100%;
}

.wp-block-button.is-arrow-end .wp-block-button__link {
	display: flex;
	justify-content: space-between;
	width: 100%;
	text-align: left;
}