/* Back to top display variants.
 *
 * 6種の形は承認済みモック `_mockup/standard/blocks.html` の
 * 「トップへ戻るボタン（6種）」（CSSは同 css/shared.css の .pagetop--*）が正本。
 * 対応は arrow=chevron / compact=circle / label=label / minimal=outline /
 * vertical=vertical / side=tab。option key は保存済みデータがあるので改名しない。
 *
 * このファイルは**形だけ**（寸法・余白・角丸・並び方向・書字方向）を持つ。
 * 色は後ロードの front-utility-control-states.css（`html[data-tiptop-palette]`＝
 * 詳細度0,2,1）が担当するので、ここには background/color/border-color を書かない。
 * 例外は「面も枠も持たない」ことを表す background: transparent と border: 0 だけ。
 */

.back-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tt-space-2);
	padding: 0;
	border-width: 1px;
	border-style: solid;
	box-shadow: none;
	backdrop-filter: none;
	cursor: pointer;
	/* モックの .pagetop--* は色だけを遷移させ、hoverで浮かせない。
	 * 旧実装の transform: translateY(-2px) はモックに無いので廃止した。 */
	transition: background var(--tt-motion-duration-fast) var(--tt-motion-easing-standard), border-color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard), color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
}

.back-to-top[hidden] {
	display: none !important;
}

.back-to-top svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.back-to-top__label {
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-label);
	font-weight: var(--tt-weight-medium);
	/* モックは 0.08em 固定。--tt-letter-add は文字余白プリセット(typography-spacing.css)
	 * への追従分で、normal では 0em ＝モックと同値になる。 */
	letter-spacing: calc(0.08em + var(--tt-letter-add));
	line-height: 1;
}

/* アイコンのみの3種。ラベルは読み上げ用に残す。 */
.back-to-top--arrow .back-to-top__label,
.back-to-top--compact .back-to-top__label,
.back-to-top--minimal .back-to-top__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* arrow ＝ モック .pagetop--chevron（矢印だけ。面も枠も無い） */
.back-to-top--arrow {
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
}

.back-to-top--arrow svg {
	width: 26px;
	height: 26px;
}

/* compact ＝ モック .pagetop--circle（塗りの円） */
.back-to-top--compact {
	width: 52px;
	height: 52px;
	border-radius: var(--tt-radius-pill);
}

.back-to-top--compact svg {
	width: 20px;
	height: 20px;
}

/* label ＝ モック .pagetop--label（角丸四角＋アイコン＋TOP） */
.back-to-top--label {
	width: auto;
	height: auto;
	padding: 0.7em 1.4em;
	border-radius: var(--tt-radius-md);
}

.back-to-top--label svg {
	width: 16px;
	height: 16px;
}

/* minimal ＝ モック .pagetop--outline（枠線のみ。枠は待機状態から見える＝
 * 色側の front-utility-control-states.css で border-color を当てている） */
.back-to-top--minimal {
	width: 48px;
	height: 48px;
	border-radius: var(--tt-radius-pill);
	background: transparent;
}

.back-to-top--minimal svg {
	width: 16px;
	height: 16px;
}

/* vertical ＝ モック .pagetop--vertical（アイコンを上、テキストだけ縦書き）。
 * 旧実装はボタン全体に writing-mode を掛けていたが、モックは flex-direction:
 * column ＋ ラベルのみ vertical-rl。 */
.back-to-top--vertical {
	width: auto;
	height: auto;
	flex-direction: column;
	border: 0;
	background: transparent;
}

.back-to-top--vertical svg {
	width: 14px;
	height: 14px;
}

.back-to-top--vertical .back-to-top__label {
	font-size: var(--tt-text-meta);
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

/* side ＝ モック .pagetop--tab（右端に張り付くタブ。上下中央）。
 * border-right は shorthand ではなく width だけ 0 にする。shorthand だと
 * border-style: none まで落ちて、下の820px以下で幅を戻しても線が出ないため。 */
.back-to-top--side {
	top: 50%;
	right: 0;
	bottom: auto;
	width: auto;
	height: auto;
	flex-direction: column;
	gap: var(--tt-space-1);
	padding: var(--tt-space-3) var(--tt-space-2);
	border-right-width: 0;
	border-radius: var(--tt-radius-sm) 0 0 var(--tt-radius-sm);
	transform: translateY(-50%);
}

.back-to-top--side svg {
	width: 16px;
	height: 16px;
}

.back-to-top--side .back-to-top__label {
	font-size: var(--tt-text-meta);
}

/* モックは固定表示しない見本なのでスマホ時の答えを持たない＝ここは実装側の判断。
 * 既存の挙動（サイズを詰める／タブは浮くボタンへ／縦書きは横組みへ）を踏襲する。 */
@media (max-width: 820px) {
	.back-to-top {
		right: 12px;
		bottom: 12px;
	}

	.back-to-top--arrow,
	.back-to-top--compact,
	.back-to-top--minimal {
		width: 44px;
		height: 44px;
	}

	.back-to-top--side {
		top: auto;
		right: 12px;
		bottom: 12px;
		width: 44px;
		height: 44px;
		flex-direction: row;
		padding: 0;
		border-right-width: 1px;
		border-radius: var(--tt-radius-pill);
		transform: none;
	}

	.back-to-top--side .back-to-top__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

	.back-to-top--vertical {
		flex-direction: row;
		padding: 6px 10px;
	}

	.back-to-top--vertical .back-to-top__label {
		writing-mode: horizontal-tb;
	}
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top {
		transition: none;
	}
}