// These margins make sure that nested blocks stack/overlay with the parent block chrome
// This is sort of an experiment at making sure the editor looks as much like the end result as possible
// Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
.wp-block-columns .editor-block-list__layout {
	&:first-child {
		margin-left: -$block-padding;
	}
	&:last-child {
		margin-right: -$block-padding;
	}

	// This max-width is used to constrain the main editor column, it should not cascade into columns
	.editor-block-list__block {
		max-width: none;
	}
}

// Wide: show no left/right margin on wide, so they stack with the column side UI
.editor-block-list__block[data-align="wide"] .wp-block-columns .editor-block-list__layout {
	&:first-child {
		margin-left: 0;
	}
	&:last-child {
		margin-right: 0;
	}
}

// Fullwide: show margin left/right to ensure there's room for the side UI
// This is not a 1:1 preview with the front-end where these margins would presumably be zero
// @todo this could be revisited, by for example showing this margin only when the parent block was selected first
// Then at least an unselected columns block would be an accurate preview
.editor-block-list__block[data-align="full"] .wp-block-columns .editor-block-list__layout {
	&:first-child {
		margin-left: $block-side-ui-padding;
	}
	&:last-child {
		margin-right: $block-side-ui-padding;
	}
}

// Hide appender shortcuts in columns
// @todo This essentially duplicates the mobile styles for the appender component
// It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec
.wp-block-columns {
	.editor-inserter-with-shortcuts {
		display: none;
	}

	.editor-block-list__empty-block-inserter,
	.editor-default-block-appender .editor-inserter {
		left: auto;
		right: $item-spacing;
	}
}
