:root {
	--ark-editor-100vw: 100vw;
}

.is-root-container,
[data-align="wide"],
[data-align="full"] {
	container-type: inline-size;
}

// フルスクリーンモード・サイドバーの展開状況に合わせる。
// インサーターなども考慮するなら .interface-interface-skeleton__secondary-sidebar ~ .interface-interface-skeleton__content で上書き
@media (min-width: 782px) {

	[data-align="full"] {
		--ark-editor-100vw: max(100%, 100cqw);
	}
}


// フロントの .alignfull, .alignwide と合わせる
[data-align="wide"],
[data-align="full"] {

	.wp-block {
		max-width: 100%;
	}

	.alignfull {
		left: 0;
		width: 100%;
	}
}


[data-align="full"] {

	// 背景色ありグループ・カバーブロックの余白量を大きく。
	> .wp-block-cover,
	> .wp-block-group.has-background {
		padding: 4em var(--ark-padding--container);
	}

	// インナーコンテンツの最大幅を記事幅に維持する
	> .wp-block-cover > .wp-block-cover__inner-container,
	> .wp-block-group.has-background > .wp-block-group__inner-container {
		max-width: var(--ark-width--article);
		margin: 0 auto;
	}

	// 全幅の中の記事幅コンテンツの中の、さらに幅広なコンテンツの挙動
	> .wp-block-cover > .wp-block-cover__inner-container,
	> .wp-block-group.has-background > .wp-block-group__inner-container,
	> .ark-block-container > .ark-block-container__inner,
	> :not([data-inner="full"]) > .ark-block-section__body > .ark-block-section__bodyInner {

		> .wp-block {
			width: 100%;
		}

		> [data-align="wide"] {
			position: relative;
			left: calc(var(--ark-alignwide_ex_width, 0px) * -1);
			width: calc(100% + var(--ark-alignwide_ex_width, 0px) * 2);
			max-width: unset !important;
		}

		> [data-align="full"] {
			position: relative;
			left: calc(50% - ( (var(--ark-editor-100vw) / 2) - var(--ark-padding--container, 0px) ));
			width: calc(var(--ark-editor-100vw) - var(--ark-padding--container, 0px) * 2);
			max-width: var(--ark-editor-100vw) !important;
		}

	}

}

// fullwideコンテンツを使うと少し左右にスクロールできてしまうのを防ぐ
.interface-interface-skeleton__content {
	overflow-x: hidden;
}

// 左右寄せ
.wp-block[data-align="left"],
.wp-block[data-align="right"] {
	height: auto;
	margin-top: var(--ark-mt);
}

[data-align="left"],
[data-align="right"] {
	height: auto;

	> .wp-block-pullquote {
		float: none;
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}
}


[data-align="left"] {

	> .wp-block-pullquote {
		text-align: left;
	}
}


[data-align="right"] {

	> .wp-block-pullquote {
		text-align: right;
	}
}