/**
Editor width control
*/

//////////////////////////////////////////////////////////////
/// Variable Setting
//////////////////////////////////////////////////////////////
body {
	--vk-width-editor-sidebar:0px; // Be aware that calc cannot calculate if there is no unit.
	--vk-width-editor-leftmenu:0px; // Be aware that calc cannot calculate if there is no unit.
	--vk-width-editor-list-view-sidebar:0px; // Be aware that calc cannot calculate if there is no unit.
	// full
	--vk-width-full:calc( 100svw - var(--vk-width-editor-sidebar) - var(--vk-width-editor-leftmenu) - var(--vk-width-editor-list-view-sidebar) );
	// body
	--vk-width-editor-container: calc( var(--vk-width-full) * 0.8 );
	--vk-width-contaner: var(--vk-width-editor-container);
	--wp--style--global--content-size: var(--vk-width-editor-container);
	// wide
	--vk-width-wide: calc( var(--vk-width-editor-container) + ( var(--vk-width-full) - var(--vk-width-editor-container) ) / 2 );
}

//  In case the left sidebar is open ( not full screen mode )
body:where(:not(.is-fullscreen-mode)) {
	--vk-width-editor-leftmenu:160px;
	&.folded {
		--vk-width-editor-leftmenu:36px;
	}
}

// In case the right sidebar is open
body:has(.is-sidebar-opened), // until WP6.5.5
body:has(.editor-sidebar) // after WP6.6
{
	--vk-width-editor-sidebar:280px;
}

// In case the block list view is open
body:has(.interface-interface-skeleton__secondary-sidebar) {
	--vk-width-editor-list-view-sidebar:350px;
}

/// mobile / tablet iframe adjustment //////////////////////////
body.block-editor-iframe__body.editor-styles-wrapper{
	// タブレット / モバイル の場合はサイドパネルの幅の変数の値を0にする
	--vk-width-editor-sidebar:0px;
	--vk-width-editor-leftmenu:0px;
	--vk-width-editor-list-view-sidebar:0px;
}


// Reser wrapper padding
html :where(.editor-styles-wrapper) .block-editor-block-list__layout.is-root-container>.wp-block[data-align=full] {
	margin-left:0;
	margin-right:0;
}

//////////////////////////////////////////////////////////////
/// Width control
//////////////////////////////////////////////////////////////

html :where(.wp-block) {
	max-width:var(--vk-width-editor-container);
}

.editor-styles-wrapper {
	.container {
		padding:0;
		max-width:var(--vk-width-editor-container);
		@media (min-width: 576px) {
			max-width:var(--vk-width-editor-container);
		}
		@media (min-width: 768px) {
			max-width:var(--vk-width-editor-container);
		}
		@media (min-width: 992px){
			max-width:var(--vk-width-editor-container);
		}
		@media (min-width: 1200px) {
			max-width:var(--vk-width-editor-container);
		}
	}
	.is-layout-constrained {
		max-width:var(--vk-width-editor-container);
		margin-left:auto;
		margin-right:auto;
	}
	:is(
		.alignfull,
		.alignfull.vk_slider,
		[data-align=full],
		.is-layout-constrained > [data-align=full]
	){
		width:var(--vk-width-full);
		max-width:var(--vk-width-full);
	}
	:is(
		.alignwide,
		[data-align=wide],
		.is-layout-constrained > [data-align=wide]
	){
		width:var(--vk-width-wide);
		max-width:var(--vk-width-wide);
	}
	// 画像ブロックの幅指定（公開画面側が100%指定しているので上書き）
	.is-root-container > .wp-block-image {
		max-width:var(--vk-width-editor-container);
		margin-left:auto;
		margin-right:auto;
	}
	// 旧 Bootstrap 用 padding リセット
	:is( .alignfull, .alignwide ) div[class*=__inner-container] {
		--vk-width-container:var(--vk-width-editor-container);
		--vk-width-container-padding: 0px;
	}
}

:is(
	.editor-styles-wrapper,
	.components-tab-panel__tab-content 
) {
	.vk_outer-width-full:is(
		.vk_outer-paddingLR-use,
		.vk_outer-paddingLR-zero,
		.vk_outer-paddingLR-none
	) {
		.wp-block:where(:not( 
			.alignfull, 
			.alignwide, 
			[data-align="wide"], 
			[data-align="full"] 
			)) .is-layout-constrained {
				--vk-width-container:var(--vk-width-editor-container);
			}
			.alignwide,
			[data-align="wide"] {
				--vk-width-container:var(--vk-width-editor-container);
			}
	}
}

//////////////////////////////////////////////////////////////
/// Horizontal margin control
//////////////////////////////////////////////////////////////
.editor-styles-wrapper {
	.alignwide,
	.alignfull,
	.alignfull.vk_slider,
	.alignwide.vk_slider,
	[data-align=wide],
	[data-align=full] {
		margin-left:auto;
		margin-right:auto;
	}
	.wp-block-vk-blocks-outer.vk_outer.vk_outer-width-full.vk_outer-paddingLR-none {
		[data-align=wide],
		[data-align=full] {
			margin-left:auto;
			margin-right:auto;
		}
	}

	// 6.6 以降は !important 不要 / 6.5 までは必要
	.is-layout-constrained > [data-align=full] {
		margin-left:calc( ( var(--vk-width-editor-container) - var(--vk-width-full) ) / 2 ) !important;
		margin-right:calc( ( var(--vk-width-editor-container) - var(--vk-width-full) ) / 2 ) !important;
	}
	.is-layout-constrained > [data-align=wide] {
		margin-left:calc( ( var(--vk-width-editor-container) - var(--vk-width-full) ) / 4 ) !important;
		margin-right:calc( ( var(--vk-width-editor-container) - var(--vk-width-full) ) / 4 ) !important;
	}
}
