/*
 * WP Parts 共通のベース。
 *
 * ここにあるのは、すべてのパーツが共通で使う語彙だけ。
 * 個々の見た目は決めない。
 */

:root {
	--wpparts-bp-sm: 640px;
	--wpparts-bp-md: 900px;

	/*
	 * 配色に依存しない色。
	 *
	 * パーツはここと --wpparts-c 系だけを見る。生の色は書かない。
	 * どんな種別が増えても、この語彙で足りるようにしてある。
	 */
	--wpparts-ink: #16181d;
	--wpparts-muted: #6b7280;
	--wpparts-line: #e2e0dc;
	--wpparts-surface: #fbfaf8;

	/* 配色が選ばれていない場所での落とし先 */
	--wpparts-c: var(--wpparts-ink);
	--wpparts-on-c: #ffffff;
}

/* パーツのルートは、置かれた場所の幅を基準に崩せるようにする */
[class*="wpp-"][class*="wp-block-wpparts-"] {
	box-sizing: border-box;
	container-type: inline-size;
}

[class*="wpp-"][class*="wp-block-wpparts-"] *,
[class*="wpp-"][class*="wp-block-wpparts-"] *::before,
[class*="wpp-"][class*="wp-block-wpparts-"] *::after {
	box-sizing: border-box;
}

/* 配置 */
.wpparts-align-left {
	text-align: left;
}

.wpparts-align-center {
	text-align: center;
}

.wpparts-align-right {
	text-align: right;
}

/* PC で横並び、スマートフォンで縦並び */
.wpparts-stack-sm,
.wpparts-stack-md {
	display: flex;
	flex-wrap: wrap;
}

@container (max-width: 640px) {
	.wpparts-stack-sm {
		flex-direction: column;
	}
}

@container (max-width: 900px) {
	.wpparts-stack-md {
		flex-direction: column;
	}
}

/* コンテナクエリが使えない環境向けに、画面幅でも同じ結果になるようにする */
@media (max-width: 640px) {
	.wpparts-stack-sm {
		flex-direction: column;
	}

	.wpparts-hide-sm {
		display: none;
	}
}

@media (max-width: 900px) {
	.wpparts-stack-md {
		flex-direction: column;
	}
}

@media (min-width: 641px) {
	.wpparts-only-sm {
		display: none;
	}
}