//FRONTEND
.wp-site-blocks { // top level of the view
	//In this situation we want to introduce a standardized gap between content and the edge of the screen.
	padding-left: var(--wp--custom--gap--horizontal);
	padding-right: var(--wp--custom--gap--horizontal);
	.alignfull {
		// these elements we want to "bust out" of the gap created above 
		margin-left: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
		margin-right: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
		width: unset;
		// however any containers that "bust out" should re-apply that gap but this time using padding instead of margins.
		&.wp-block-template-part,
		&.wp-block-columns,
		&.wp-block-group {
	 		padding-left: var(--wp--custom--gap--horizontal);
	 		padding-right: var(--wp--custom--gap--horizontal);
		}
	}
}

// EDITOR (NOTE: It PROBABLY would be OK to bring these together to "simplify" the stylesheet.  However the selectors are quite different
// and it's a lot easier to understand and ensure intent separated in this way.
.is-root-container { //top level of the editor
	padding-left: var(--wp--custom--gap--horizontal);
	padding-right: var(--wp--custom--gap--horizontal);
	.wp-block[data-align="full"] { //blocks configured to be "align full" in "editorspeak"
		margin-left: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
		margin-right: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
		width: unset;
		>.wp-block-group {
	 		padding-left: var(--wp--custom--gap--horizontal);
	 		padding-right: var(--wp--custom--gap--horizontal);
		}
	}
}

@include break-mobile {
	// limit size of any element that is aligned left/right
	.wp-block[data-align="left"], // This is for the editor
	.wp-block[data-align="right"], // This is for the editor
	.wp-site-blocks .alignleft,
	.wp-site-blocks .alignright {
		max-width: var(--wp--custom--alignment--aligned-max-width);
	}
}

// This was added for the 'site-logo' block which centers with an 'align:center' attribute
// instead of 'textAlign' center which sets an .aligncenter class instead of a has-text-align-center
// class which would do this for us.  I'm not sure why but this centers things appropriately.
// Display and margin properties added to support image alignment from the classic editor.
.aligncenter {
	text-align: center;
	display: block;
	margin-right: auto;
	margin-left: auto;
}