// 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
// When using CSS grid, margins do not collapse on the container.
.wp-block-columns .block-editor-block-list__layout {
	margin-left: 0;
	margin-right: 0;

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

// 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.
.block-editor-block-list__block[data-align="full"] .wp-block-columns > .block-editor-inner-blocks {
	padding-left: $block-padding;
	padding-right: $block-padding;

	@include break-small() {
		padding-left: $block-padding + $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance;
		padding-right: $block-padding + $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance;
	}
}

.wp-block-columns {
	display: block;

	> .block-editor-inner-blocks > .block-editor-block-list__layout {
		display: flex;

		// Responsiveness: Allow wrapping on mobile.
		flex-wrap: wrap;

		@include break-medium() {
			flex-wrap: nowrap;
		}

		// Adjust the individual column block.
		> [data-type="core/column"] {
			display: flex;
			flex-direction: column;
			flex: 1;

			// The Column block is a child of the Columns block and is mostly a passthrough container.
			// Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins.
			// @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way.
			> .block-editor-block-list__block-edit > div > .block-editor-inner-blocks {
				margin-top: -$block-padding - $block-padding;
				margin-bottom: -$block-padding - $block-padding;
			}

			> .block-editor-block-list__block-edit {
				margin-top: 0;
				margin-bottom: 0;
			}

			// Extend the passthrough concept to the block paddings, which we zero out.
			> .block-editor-block-list__block-edit::before {
				left: 0;
				right: 0;
			}
			> .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar {
				margin-left: -$border-width;
			}

			// On mobile, only a single column is shown, so match adjacent block paddings.
			padding-left: 0;
			padding-right: 0;
			margin-left: -$block-padding;
			margin-right: -$block-padding;
			@include break-small() {
				margin-left: $block-padding;
				margin-right: $block-padding;
			}

			// Prevent the columns from growing wider than their distributed sizes.
			min-width: 0;

			// Prevent long unbroken words from overflowing.
			word-break: break-word; // For back-compat.
			overflow-wrap: break-word; // New standard.

			// Responsiveness: Show at most one columns on mobile.
			flex-basis: 100%;

			// Beyond mobile, allow 2 columns.
			@include break-small() {
				flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2}));
				flex-grow: 0;
			}

			// Add space between columns. Themes can customize this if they wish to work differently.
			// This has to match the same padding applied in style.scss.
			// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
			@include break-small() {
				&:nth-child(even) {
					margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
				}
			}

			// When columns are in a single row, add space before all except the first.
			@include break-medium() {
				&:not(:first-child) {
					margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
				}
			}
		}
	}
}

// The empty state of a columns block has the default appenders.
// Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders.
// Because the column shouldn't be hovered as part of this temporary passthrough, we unset the hover style.
.wp-block-columns [data-type="core/column"].is-hovered {
	> .block-editor-block-list__block-edit::before {
		content: none;
	}

	.block-editor-block-list__breadcrumb {
		display: none;
	}
}

// In absence of making the individual columns resizable, we prevent them from being clickable.
// This makes them less fiddly. @todo: This should be revisited as the interface is refined.
.wp-block-columns [data-type="core/column"] {
	pointer-events: none;

	// This selector re-enables clicking on any child of a column block.
	.block-editor-block-list__layout {
		pointer-events: all;
	}
}