@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;

// Provide baseline auto margin for centering blocks.
// Specificity is kept at this level as many classic themes output
// rules like figure { margin: 0; } which would break centering.
// These rules should also not apply to direct children of flex layout blocks.
.editor-styles-wrapper :where(:not(.is-layout-flex, .is-layout-grid)) > .wp-block {
	margin-left: auto;
	margin-right: auto;
}

// Add a default 8px padding for classic themes around the canvas.
// Themes with theme.json can control this themselves.
// For full-wide blocks, we compensate for the base padding.
// These margins should match the padding value above.
.editor-styles-wrapper {
	padding: 8px;
}

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

// Deprecated style needed for the block widths and alignments.
// for themes that don't support the new layout (theme.json).
html :where(.wp-block) {
	max-width: $content-width;

	// Provide every block with a default base margin. This margin provides a consistent spacing
	// between blocks in the editor.
	margin-top: $default-block-margin;
	margin-bottom: $default-block-margin;

	&[data-align="wide"] {
		max-width: $wide-content-width;
	}

	&[data-align="full"] {
		max-width: none;
	}

	// Alignments.
	&[data-align="left"],
	&[data-align="right"] {
		width: 100%;

		// When images are floated, the block itself should collapse to zero height.
		height: 0;

		&::before {
			content: none;
		}
	}

	// Left.
	&[data-align="left"] > * {
		/*!rtl:begin:ignore*/
		float: left;
		margin-right: 2em;
		/*!rtl:end:ignore*/
	}

	// Right.
	&[data-align="right"] > * {
		/*!rtl:begin:ignore*/
		float: right;
		margin-left: 2em;
		/*!rtl:end:ignore*/
	}

	// Wide and full-wide.
	&[data-align="full"],
	&[data-align="wide"] {
		clear: both;
	}
}

// Full Width Blocks
// specificity required to only target immediate child Blocks of a Group
.wp-block-group > [data-align="full"] {
	margin-left: auto;
	margin-right: auto;
}

// Full Width Blocks with a background (ie: has padding)
.wp-block-group.has-background > [data-align="full"] {
	// note: using position `left` causes hoz scrollbars so
	// we opt to use margin instead
	// the 30px matches the hoz padding applied in `theme.scss`
	// added when the Block has a background set
	margin-left: -30px;

	// 60px here is x2 the hoz padding from `theme.scss` added when
	// the Block has a background set
	// note: also duplicated below for full width Groups
	width: calc(100% + 60px);
}

/**
* Group: Full Width Alignment
*/
[data-align="full"] .wp-block-group {
	// Non-full Width Blocks
	// specificity required to only target immediate child Blocks of Group
	> .wp-block {
		padding-left: $block-padding;
		padding-right: $block-padding;

		@include break-small() {
			padding-left: 0;
			padding-right: 0;
		}
	}

	// Full Width Blocks
	// specificity required to only target immediate child Blocks of Group
	> [data-align="full"] {
		padding-right: 0;
		padding-left: 0;
		left: 0;
		width: 100%;
		max-width: none;
	}

	// Full Width Blocks with a background (ie: has padding)
	// note: also duplicated above for all Group widths
	&.has-background > [data-align="full"] {
		width: calc(100% + 60px);
	}
}