/**
 * SWELL+ JS Link Button — SWELL本家ボタン互換ブリッジ
 *
 * SWELL本家はボタンの見た目を `[class*=is-style-btn_] a`（=<a>タグ）に当てている。
 * 一方、JS Link Helper のクローキング遷移はクリック対象が span / img / picture のみのため、
 * 本ブロックの内側クリック要素は <span class="swell-block-button__link swell-plus-jslink"> を使う。
 * その結果、本家CSSは <a> 狙いで span には当たらないので、本家が <a> に当てている
 * ボタン表示ルールを span(.swell-plus-jslink) へ「橋渡し」するのがこのファイル。
 *
 * 値（色・サイズ・余白・角丸）はSWELLが各ラッパークラス（is-style-btn_* / -size-* / red_ 等）で
 * セットする CSS 変数（--the-btn-bg / --the-fz / --the-min-width / --the-padding / --the-btn-radius …）を
 * そのまま読むため、SWELLテーマ有効時はテーマのボタン設定・カラー設定と完全に一致する。
 * SWELLが無効な環境では js-link-button-standalone.css がこれらの変数を定義してフォールバックする。
 */

/* ラッパーは本家 .swell-block-button を流用するので、配置・余白は本家CSSに任せる。 */
/* エディター内など本家のブロック余白が効かない場面のための最小限の補正のみ。 */
.swell-plus-jslink-block {
	box-sizing: border-box;
}

/* =========================================================
 *  内側 span を本家 <a>（.swell-block-button__link）と同じ見た目にする
 *
 *  本家は基本スタイルを `[class*=is-style-btn_] a` に当てており、MORE（is-style-more_btn）は
 *  この基本スタイルに含めず別途定義している。角丸（--the-btn-radius）も基本スタイル側だけに付くため、
 *  MOREには角丸が乗らない。ここでも同じセレクタ構造を踏襲し、MOREを基本スタイルから除外する。
 * ========================================================= */
[class*="is-style-btn_"] .swell-plus-jslink {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: var(--the-width, auto);
	min-width: var(--the-min-width);
	margin: 0;
	padding: var(--the-padding);
	background: var(--the-btn-bg);
	border-radius: var(--the-btn-radius, 0);
	letter-spacing: var(--swl-letter_spacing, 1px);
	line-height: 1.5;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: box-shadow .25s, background-color .25s, transform .25s, opacity .25s;
}

/* アイコン併用時、本家と同じ flex レイアウトを span にも適用 */
.swell-block-button .swell-plus-jslink[data-has-icon] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
}

/* アイコン（本家 .__icon と同じ挙動。サイズは --the-icon-size、色は currentColor） */
.swell-block-button .__icon {
	flex-shrink: 0;
	width: var(--the-icon-size, 1.1em);
	height: var(--the-icon-size, 1.1em);
	font-size: var(--the-icon-size, 1.1em);
	fill: currentColor;
}

.swell-block-button .__icon:not(.-right) {
	margin-left: -.25em;
}

.swell-block-button .__icon.-right {
	margin-right: -.25em;
}

/* キーボード操作のフォーカス可視化 */
.swell-block-button .swell-plus-jslink:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---- ノーマル ---- */
.is-style-btn_normal .swell-plus-jslink {
	color: #fff;
	font-weight: 700;
}

.is-style-btn_normal .swell-plus-jslink:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 12px 24px -12px rgba(0, 0, 0, .2);
	opacity: 1;
}

/* ---- 立体（solid） ---- */
.is-style-btn_solid .swell-plus-jslink {
	z-index: 1;
	color: #fff;
	font-weight: 700;
	box-shadow: 0 4px 0 var(--the-solid-shadow, var(--color_main_dark));
}

.is-style-btn_solid .swell-plus-jslink:hover {
	transform: translate3d(0, 4px, 0);
	box-shadow: 0 0 0 transparent !important;
}

/* ---- キラッと（shiny） ---- */
.is-style-btn_shiny .swell-plus-jslink {
	z-index: 0;
	overflow: hidden;
	color: #fff;
	font-weight: 700;
}

.is-style-btn_shiny .swell-plus-jslink::before {
	position: absolute;
	top: 50%;
	left: -120px;
	width: 80px;
	height: 200px;
	background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .6) 80%, hsla(0, 0%, 100%, 0));
	content: "";
	transform: translateY(-50%) rotate(25deg);
	pointer-events: none;
}

.is-style-btn_shiny .swell-plus-jslink::after {
	position: absolute;
	top: 0;
	left: -100px;
	width: 50px;
	height: 100%;
	background-image: linear-gradient(100deg, hsla(0, 0%, 100%, 0), #fff);
	content: "";
	animation: shiny_btn 3s ease-in-out infinite;
	pointer-events: none;
}

.is-style-btn_shiny .swell-plus-jslink:hover {
	transform: translateY(2px);
}

.is-style-btn_shiny .swell-plus-jslink:hover::before {
	left: 110%;
	transition: .25s ease-in-out;
}

.is-style-btn_shiny .swell-plus-jslink:hover::after {
	animation: none;
}

/* ---- アウトライン（line） ---- */
.is-style-btn_line .swell-plus-jslink {
	background: none;
	border: 1px solid;
	color: var(--the-btn-color, var(--color_main));
}

.is-style-btn_line .swell-plus-jslink:hover {
	background-color: var(--the-btn-color, var(--color_main));
	border-color: transparent;
	color: #fff !important;
}

/* ---- MORE（more_btn）：本家同様、角丸（--the-btn-radius）は付けない ---- */
.is-style-more_btn .swell-plus-jslink {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: var(--the-width, auto);
	min-width: var(--the-min-width);
	padding: var(--the-padding);
	background: #fff;
	box-shadow: 0 0 0 1px #dcdcdc;
	color: #666;
	font-size: var(--the-fz);
	line-height: 1.5;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: box-shadow .25s, background-color .25s;
}

.is-style-more_btn .swell-plus-jslink::after {
	position: absolute;
	top: 50%;
	right: 1em;
	content: "\e930";
	font-family: icomoon;
	transform: translateY(-50%);
	transition: transform .25s;
}

.is-style-more_btn .swell-plus-jslink:hover {
	background-color: var(--color_main);
	box-shadow: none;
	color: #fff;
}

.is-style-more_btn .swell-plus-jslink:hover::after {
	transform: translateX(4px) translateY(-50%);
}

/* =========================================================
 *  エディター用の候補ピッカー（管理UI）
 * ========================================================= */
.swell-plus-js-link-button-picker {
	margin-top: 12px;
}

.swell-plus-js-link-button-picker__current-text {
	margin: 6px 0 0;
}

.swell-plus-js-link-button-picker__current-text code {
	font-size: 11px;
}