/*-------------------------------------------*/
/* .wp-block-vk-blocks-grid-column Layout
/*-------------------------------------------*/

.vk_gridColumn > .block-editor-inner-blocks > .block-editor-block-list__layout {
	border:none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    margin-right: -15px;
	margin-left: -15px;

	//inner-blocksの中のinner-blocksのcss打ち消し
	.block-editor-inner-blocks .block-editor-block-list__layout{
		display: unset;
		flex-direction:unset;
		flex-wrap: unset;
		&.wp-block-social-links, //inner-blocksの中のinner-blocksがソーシャルアイコンブロックだった場合
		&.wp-block-group { //inner-blocksの中のinner-blocksがグループブロックだった場合
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
	}

	// colの余分な余白の削除など
	// col内に入れたブロックにまで反映されないように & > 指定
	div[class*="col-"].block-editor-block-list__block {
		flex: inherit;
		margin:0 15px 15px;
		padding: 0;
		outline: 1px dashed #ccc;
		transition: 1.0s ;
		&:focus,&:active,&:hover{
			outline: 1px solid #555d66;
		}
		.wp-block-vk-blocks-grid-column-item{
			padding: 0;
			width: 100%;
		}
	}
	
	& > .col-xs-2,
	& > .col-xs-2 + .block-list-appender.wp-block {
		width: calc(16.66% - 30px);
		max-width: var(--vk-width-couter-col-2) ;
	}
	& > .col-xs-3,
	& > .col-xs-3 + .block-list-appender.wp-block {
		width: calc(25% - 30px);
		max-width: var(--vk-width-couter-col-3) ;
	}
	& > .col-xs-4,
	& > .col-xs-4 + .block-list-appender.wp-block {
		width: calc(33.3% - 30px);
		max-width: var(--vk-width-couter-col-4) ;
	}

	& > .col-xs-6,
	& > .col-xs-6 + .block-list-appender.wp-block {
		width: calc(50% - 30px);
		max-width: var(--vk-width-couter-col-6) ;
	}

	& > .col-xs-12,
	& > .col-xs-12 + .block-list-appender.wp-block {
		width: calc(100% - 30px);
		max-width: var(--vk-width-couter-col-12) ;
	}
	@media (min-width: $sm-min) {
		& > .col-sm-2,
		& > .col-sm-2 + .block-list-appender.wp-block {
			width: calc(16.66% - 30px);
			max-width: var(--vk-width-couter-col-2) ;
		}
		& > .col-sm-3,
		& > .col-sm-3 + .block-list-appender.wp-block {
			width: calc(25% - 30px);
			max-width: var(--vk-width-couter-col-3) ;
		}
		& > .col-sm-4,
		& > .col-sm-4 + .block-list-appender.wp-block {
			width: calc(33.3% - 30px);
			max-width: var(--vk-width-couter-col-4) ;
		}
		& > .col-sm-6,
		& > .col-sm-6 + .block-list-appender.wp-block {
			width: calc(50% - 30px);
			max-width: var(--vk-width-couter-col-6) ;
		}
		& > .col-sm-12,
		& > .col-sm-12 + .block-list-appender.wp-block {
			width: calc(100% - 30px);
			max-width: var(--vk-width-couter-col-12) ;
		}
	}
	@media (min-width: $md-min) {
		& > .col-md-2,
		& > .col-md-2 + .block-list-appender.wp-block {
			width: calc(16.66% - 30px);
			max-width: var(--vk-width-couter-col-2) ;
		}
		& > .col-md-3,
		& > .col-md-3 + .block-list-appender.wp-block {
			width: calc(25% - 30px);
			max-width: var(--vk-width-couter-col-3) ;
		}
		& > .col-md-4,
		& > .col-md-4 + .block-list-appender.wp-block {
			width: calc(33.3% - 30px);
			max-width: var(--vk-width-couter-col-4) ;
		}
		& > .col-md-6,
		& > .col-md-6 + .block-list-appender.wp-block {
			width: calc(50% - 30px);
			max-width: var(--vk-width-couter-col-6) ;
		}
		& > .col-md-12,
		& > .col-md-12 + .block-list-appender.wp-block {
			width: calc(100% - 30px);
			max-width: var(--vk-width-couter-col-12) ;
		}
	}
	@media (min-width: $lg-min) {
		& > .col-lg-2,
		& > .col-lg-2 + .block-list-appender.wp-block {
			width: calc(16.66% - 30px);
			max-width: var(--vk-width-couter-col-2) ;
		}
		& > .col-lg-3,
		& > .col-lg-3 + .block-list-appender.wp-block {
			width: calc(25% - 30px);
			max-width: var(--vk-width-couter-col-3) ;
		}
		& > .col-lg-4,
		& > .col-lg-4 + .block-list-appender.wp-block {
			width: calc(33.3% - 30px);
			max-width: var(--vk-width-couter-col-4) ;
		}
		& > .col-lg-6,
		& > .col-lg-6 + .block-list-appender.wp-block {
			width: calc(50% - 30px);
			max-width: var(--vk-width-couter-col-6) ;
		}
		& > .col-lg-12,
		& > .col-lg-12 + .block-list-appender.wp-block {
			width: calc(100% - 30px);
			max-width: var(--vk-width-couter-col-12) ;
		}
	}
	@media (min-width: $xl-min) {
		& > .col-xl-2,
		& > .col-xl-2 + .block-list-appender.wp-block {
			width: calc(16.66% - 30px);
			max-width: var(--vk-width-couter-col-2) ;
		}
		& > .col-xl-3,
		& > .col-xl-3 + .block-list-appender.wp-block {
			width: calc(25% - 30px);
			max-width: var(--vk-width-couter-col-3) ;
		}
		& > .col-xl-4,
		& > .col-xl-4 + .block-list-appender.wp-block {
			width: calc(33.3% - 30px);
			max-width: var(--vk-width-couter-col-4) ;
		}
		& > .col-xl-6,
		& > .col-xl-6 + .block-list-appender.wp-block  {
			width: calc(50% - 30px);
			max-width: var(--vk-width-couter-col-6) ;
		}
		& > .col-xl-12,
		& > .col-xl-12 + .block-list-appender.wp-block {
			width: calc(100% - 30px);
			max-width: var(--vk-width-couter-col-12) ;
		}
	}
	@media (min-width: $xxl-min) {
		& > .col-xxl-2,
		& > .col-xxl-2 + .block-list-appender.wp-block {
			width: calc(16.66% - 30px);
			max-width: var(--vk-width-couter-col-2) ;
		}
		& > .col-xxl-3,
		& > .col-xxl-3 + .block-list-appender.wp-block {
			width: calc(25% - 30px);
			max-width: var(--vk-width-couter-col-3) ;
		}
		& > .col-xxl-4,
		& > .col-xxl-4 + .block-list-appender.wp-block {
			width: calc(33.3% - 30px);
			max-width: var(--vk-width-couter-col-4) ;
		}
		& > .col-xxl-6,
		& > .col-xxl-6 + .block-list-appender.wp-block {
			width: calc(50% - 30px);
			max-width: var(--vk-width-couter-col-6) ;
		}
		& > .col-xxl-12,
		& > .col-xxl-12 + .block-list-appender.wp-block {
			width: calc(100% - 30px);
			max-width: var(--vk-width-couter-col-12) ;
		}
	}

}//.wp-block-vk-blocks-grid-column 

.wp-block-vk-blocks-grid-column  {
	&-item {
		.vk_gridColumn_item_inner {
			// 編集画面で背景色がはみ出すのを防ぐ
			box-sizing: border-box;
		}
	}
	div[data-type="vk-blocks/grid-column-item"]{
		// これがないとカラムのセルが潰れて中に何もいれられない
		min-height:30px;
	}
	.wp-block-vk-blocks-grid-column-item .block-editor-block-list__layout{
		// プレースホルダーの文字が枠から左にはみ出す
		margin-left:0;
		margin-right: 0;
	}
	.wp-block-vk-blocks-grid-column-item{
		.wp-block[data-align="left"], .wp-block[data-align="right"]{
			//これがないと、グリッドカラムブロック内のボタンを左/右寄せにした時に、ボタンのheightが0になる。
			height: auto;
		}
	}
}