@use "sass:map";

// Share global content area mixin
// -----------------------------------------------------------------
// These styles are meant to apply to any content blocks in the content area of of block editor pages, on the front end as well as in the back end blockeditor.
// These styles are also meant to apply to the content area of classic edtior pages.
// A selector map can be passed thru, by default it is set to pass in $frontend-selectors

@mixin contentarea-vertical-spacings {
	%contentarea-elements {
		max-width: var( --bu-container-max-inline-size--content );
		margin-block: var( --bu-container-spacing );
		margin-inline: auto;
	}
}
@mixin contentarea-base-styles {
	flex-grow: 1;
	padding: 0;

	* {
		&.has-background {
			padding-block: var( --bu-container-padding-vertical );
			padding-inline: var( --bu-container-padding-horizontal );

			> * {
				&:first-child {
					margin-block-start: 0;
				}

				&:last-child {
					margin-block-end: 0;
				}
			}
		}
	}
	// Top level content styles
	// -----------------------------------------------------------------
	// These styles use a child combinator so as to only target unnested blocks and page elements.

	> {
		* {
			margin-inline: auto;
			max-width: var( --bu-container-size--content );
		}
	}
}

@mixin contentarea-base-styles-editor-only {
	> * {
		max-width: var(--bu-container-size--content) !important;

		&[ data-align= "wide" ] {
			max-width: var(--bu-container-size--wide) !important;
		}

		&[ data-align= "full" ] {
			max-width: var(--bu-container-size--full) !important;
		}
	}
}

@mixin contentarea-alignment-styles( $selectors: $frontend-selectors ) {
	#{map.get($selectors, 'alignwide')}  {
		box-sizing: border-box;
		clear: both;
		margin-inline: auto;
		max-width: var( --bu-container-size--wide );
		max-width: var( --bu-container-max-inline-size--wide );
	}

	#{map.get( $selectors, 'alignfull' )} {
		clear: both;
		max-width: none;
		margin-inline: auto;
	}

	#{map.get( $selectors, 'alignleft' )},
	#{map.get( $selectors, 'alignright' )},
	#{map.get( $selectors, 'aligncenter' )} {
		margin-block-start: 0;
		margin-block-end: var( --bu-container-spacing );
		max-width: 50%;
	}

	#{map.get( $selectors, 'alignleft' )} {
		float: left;
		margin-inline-end: var( --bu-container-gutter ) !important; // !important needed to toverride margin-left: auto !important set on the block editor
	}

	#{map.get( $selectors, 'alignright' )} {
		float: right;
		margin-inline-start: var( --bu-container-gutter ) !important; // !important needed to toverride margin-left: auto !important set on the block editor
	}

	// Top level content styles
	// -----------------------------------------------------------------
	// These styles use a child combinator so as to only target unnested blocks and page elements.
	> {
		* {

			--bu-container-min-inline-size--float: 300px;
			margin-inline: auto;
			max-width: var( --bu-container-size--content );
		}

		#{map.get($selectors, 'alignwide')}  {
			max-width: var( --bu-container-size--wide );
		}

		#{map.get( $selectors, 'alignleft' )},
		#{map.get( $selectors, 'alignright' )},
		#{map.get( $selectors, 'aligncenter' )} {
			max-width: var( --bu-container-size--float );
		}

		#{map.get( $selectors, 'alignleft' )} {
			margin-inline-start: var( --bu-container-offset--content ) !important; // !important needed to toverride margin-left: auto !important set on the block editor
		}

		#{map.get( $selectors, 'alignright' )} {
			margin-inline-end: var( --bu-container-offset--content ) !important; // !important needed to toverride margin-left: auto !important set on the block editor
		}
	}
}

// mixin for addressing image-block inconsistencies introduced by the block editor
@mixin image-block-editor-styles( $selectors: $frontend-selectors ) {
	// Suppresses margins given to floated .wp-block-image in the editor exclusively
	.wp-block {
		&#{map.get($selectors, 'alignleft')},
		&#{map.get($selectors, 'alignright')} {
			> {
				.wp-block-image {
					margin: 0;
				}
			}
		}
	}
}

// mixin for addressing embed-block inconsistencies introduced by the block editor
@mixin embed-block-editor-styles( $selectors: $frontend-selectors ) {
	:where( .wp-block ) {
		&#{map.get($selectors, 'alignleft')},
		&#{map.get($selectors, 'alignright')},
		&#{map.get($selectors, 'aligncenter')} {

			&:has( > .wp-block-embed ) {
				width: 100%;
			}

			:where( .wp-block-embed ) {
				margin: 0;
				max-width: none;
			}
		}
	}
}