/**
 * core/group のブロックスタイル「流れ続ける（一時停止つき）」 is-style-marquee
 *
 * 横並び（行）のグループに付けると、中のカードが右から左へ止まらずに流れる。
 * 動かすのは assets/js/group-marquee.js（このスタイルが描画されたページでだけ読み込む）。
 * カードの幅（SP は別の幅）・間隔は、グループと中のブロックのパネル（幅：固定／ブロックの間隔）で決める。
 *
 * JS が動かない環境とエディタでは、横スクロールで全部読める。
 * 「動き」は標準のパネルでは作れないので、CSS と JS を持つ。
 */

/* JS が動く前・エディタ：横スクロール。影が切れないよう上下に余白 */
.wp-block-group.is-style-marquee {
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-block: 10px 20px;
}

/* カードは縮めない（幅はパネルの「幅：固定」。コアの既定は縮む設定なので、エディタでカードが細くつぶれていた。第6段階で修正） */
.wp-block-group.is-style-marquee > * {
	flex-shrink: 0;
}

/* カード内の画像：16:9 の画面写真を 8:5 の枠に収めたときの上下の余白を薄グレーに */
.wp-block-group.is-style-marquee img {
	background-color: var(--wp--preset--color--gray-light);
}

/* ---------- JS が組み立てる部品 ---------- */
.hpcode-marquee__toolbar {
	display: flex;
	justify-content: flex-end;
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-inline: auto;
	/* カードの下に置く（第8段階）。上はカードの影の下の余白（viewport の padding-bottom 20px）に続く */
	padding: 0 20px;
}

.hpcode-marquee__pause {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border: 1px solid currentcolor;
	border-radius: 100px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.hpcode-marquee__pause:hover {
	background-color: var(--wp--preset--color--gray);
}

.hpcode-marquee__pause:focus-visible,
.hpcode-marquee__viewport:focus-visible {
	outline: 2px solid var(--wp--preset--color--lp-accent-dark);
	outline-offset: 2px;
}

.hpcode-marquee__pause-icon {
	display: block;
	box-sizing: border-box;
	width: 10px;
	height: 12px;
}

.hpcode-marquee:not([data-paused="true"]) .hpcode-marquee__pause-icon {
	border-inline: 3px solid currentcolor;
}

.hpcode-marquee[data-paused="true"] .hpcode-marquee__pause-icon {
	width: 0;
	border-block: 6px solid transparent;
	border-inline-start: 10px solid currentcolor;
}

.hpcode-marquee__viewport {
	overflow: hidden;
	padding-block: 10px 20px;
}

.hpcode-marquee__track {
	display: flex;
	width: max-content;
	animation: hpcode-marquee-flow 130s linear infinite;
}

/* 流れているときは、列そのもののスクロール・余白は使わない（つなぎ目の間隔は JS が右の余白で作る） */
.hpcode-marquee__track > .wp-block-group.is-style-marquee {
	flex: none;
	margin: 0;
	padding-block: 0;
	overflow: visible;
}

.hpcode-marquee[data-paused="true"] .hpcode-marquee__track,
.hpcode-marquee__viewport:hover .hpcode-marquee__track,
.hpcode-marquee__viewport:focus-within .hpcode-marquee__track {
	animation-play-state: paused;
}

@keyframes hpcode-marquee-flow {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* タッチ端末では hover で止まったままにならないようにする */
@media (hover: none) {
	.hpcode-marquee__viewport:hover .hpcode-marquee__track { animation-play-state: running; }
	.hpcode-marquee[data-paused="true"] .hpcode-marquee__track,
	.hpcode-marquee__viewport:focus-within .hpcode-marquee__track { animation-play-state: paused; }
}

/* 動きを減らす設定（prefers-reduced-motion: reduce）では、JS が最初から止めた状態（data-paused="true"）にする。
   ここで animation: none にすると「再生」を押しても流れないので、止めるのは animation-play-state だけにしている（第7段階で修正） */