.block-editor {
	.caxton-layout-picker {
		border: 1px solid #aaa;
		padding: 16px;
		grid-column: 1/-1;
		.caxton-layout-preview {
			display: grid;
			grid-template-columns: repeat(12, 12px);
			grid-gap: 5px;
			padding: 4px;
			grid-auto-rows: 25px;
			border: 3px solid #eee;
			background: #eee;
			cursor: pointer;
			opacity: .88;
			&:hover {
				border-color: #aaa;
				opacity: 1;
			}
			.caxton-layout-preview-section {
				background: #999;
			}
			&.caxton-layout-selected {
				background: #ccc;
				.caxton-layout-preview-section {
					background: #777;
				}
			}
		}
		.caxton-layout-preview-wrap {
			float: left;
			position: relative;
			margin: 0 25px 25px 0;

			&:hover .caxton-layout-preview-legends {
				opacity: .7;
				&:hover {
					opacity: 1;
				}
			}
		}
		.caxton-layout-preview-legends {
			position: absolute;
			top: calc( 100% - 1px );
			right: 0;
			z-index: 1;
			opacity: 0;
			.dashicons {
				float: left;
			}
		}
		&.caxton-responsive-layout-picker {
			border: none;
			padding: 0;
			column-count: 2;
			column-gap: 5px;
			.caxton-layout-preview {
				grid-template-columns: repeat(12, 1fr);
				grid-gap: 2px;
				padding: 2px;
				grid-auto-rows: 11px;
			}
			.caxton-layout-preview-wrap {
				display: inline-block;
				-webkit-column-break-inside: avoid;
				page-break-inside: avoid;
				break-inside: avoid;
				margin: 0;
				padding: 2.5px 0;
				width: 100%;
			}
		}
	}

	.caxton-columns {
		grid-template-columns: 100%;
		> .block-editor-inner-blocks > .block-editor-block-list__layout {
			&:before {
				display: none;
			}
			display: grid;
			grid: inherit;
			grid-auto-rows: minmax( 70px, auto );
			> .block-editor-block-list__block {
				margin: 0;
				padding: 0;
				transform: none;
			}
		}
		.caxton-section-block {
			grid-template-columns: 100%;
			.block-editor-block-list__layout {
				margin: 0;
			}
		}

			@for $i from 1 to 6 {
			&.caxton-#{$i}-columns > .block-editor-inner-blocks > .block-editor-block-list__layout {
				grid-template-columns: repeat($i, 1fr);
			}
		}
	}
}

.caxton-grid-block {
	> .block-editor-inner-blocks {
		grid: inherit;
		grid-gap: inherit;
		grid-column: 1 / -1;
		> .block-editor-block-list__layout {
			grid: inherit;
			grid-gap: inherit;
			grid-column: 1/-1;
			display: grid;
			margin: 0;
		}
		.block-editor-block-list__block {
			margin: 0;
			max-width: none;
		}
	}
	.block-editor-inner-blocks + .block-editor-inserter {
		position: absolute;
		bottom: 0;
		right: 0;
		svg {
			fill: #e74c3c;
		}
		button {
			border-radius: 50%;
		}
	}
	.block-editor-block-list__block:not(:last-child) .block-editor-inner-blocks + .block-editor-inserter {
		display: none;
	}

}

[data-caxton-section] {
	justify-content: stretch;
	align-items: stretch;
	transition: all .7s;
	background: rgba(0,0,0,0.025);
	box-shadow: inset 0 0 7px 2px rgba(0,0,0,0.05);
	transform: none !important;
	&.is-selected-parent,
	&.is-selected {
		background: rgba(0,0,0,0);
		box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.07);
	}
	> .block-editor-block-list__block-edit {
		height: calc( 100% - 64px );
		> [data-block] {
			margin: 0;
		}
		[data-block] {
			height: 100%;
			box-sizing: border-box;
			> div, .relative:first-child:last-child {
				height: 100%;
				box-sizing: border-box;
			}
		}
	}
}

.edit-post-visual-editor .block-editor-block-list__block[data-type='caxton/section'] > .block-editor-block-list__block-edit {
	margin: 0;
	height: 100%;
}

[data-type='caxton/grid'] > .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb {
	display: none !important;
}

.block-editor-block-list__block[data-type='caxton/grid']:hover > div:first-child:after {
	content: "Caxton Layout";
	display: block;
	width: 106px;
	right: -16px;
	position: absolute;
	bottom: -16px;
	background: #007cba;
	color: #fff;
	text-align: center;
	font: 11px/1.8 sans-serif;
	padding: 2px 0 0;
	text-transform: uppercase;
	z-index: 999;
	opacity: 1;
}

.block-editor-block-list__layout .block-editor-block-list__block[data-type='caxton/grid']:hover > .block-editor-block-list__block-edit:before {
	outline: 1px solid #007cba;
	outline-offset: 2px;
}