/* FILE: global/wp/_colors.scss */
@use 'sass:map';
@use 'sass:string';

// Has background.

	.has-background {

		&[class] {
			padding-top:    var(--theme--css--has-background--padding-top);
			padding-bottom: var(--theme--css--has-background--padding-bottom);
			padding-left:   var(--theme--css--has-background--padding-left);
			padding-right:  var(--theme--css--has-background--padding-right);

			> .alignfull {
				width: auto !important;
				margin-left:  calc( -1 * var(--theme--css--has-background--padding-left) );
				margin-right: calc( -1 * var(--theme--css--has-background--padding-right) );
			}

			@include media( ( map.get( $breakpoint, 'm' ), 'max-width' ) ) {
				--theme--css--has-background--padding-left:  var(--wp--style--root--padding-left);
				--theme--css--has-background--padding-right: var(--wp--style--root--padding-right);
			}
		}

		// Apply actual global padding when needed…
		&.has-global-padding {

			// &, // Commenting this out is related to "Important" notice below.
			header > &,
			footer > &,
			main > &,
			main > .wp-block-post-content > &.alignfull,
			main > .wp-block-template-part > & {
				--theme--css--has-background--padding-left:  var(--wp--style--root--padding-left);
				--theme--css--has-background--padding-right: var(--wp--style--root--padding-right);

				// Reset back:
				.has-background:not( .has-global-padding.alignfull ) {
					--theme--css--has-background--padding-left:  var(--wp--custom--spacing--has-background--left);
					--theme--css--has-background--padding-right: var(--wp--custom--spacing--has-background--right);
				}
			}

			// IMPORTANT:
			// Unlike WordPress core themes (such as Twenty Twenty-Four)
			// we are applying automatic padding on blocks set with
			// background. So, unlike those themes, we need to prevent
			// horizontal scroll (for example when nesting 2 fully
			// aligned blocks with background in the root container
			// of the page/post content).
			&[style*="padding-left: 0"],
			&[style*="padding-left:0"],
			&[style*="padding: 0"],
			&[style*="padding:0"] {

				> .alignfull {
					margin-left: 0;
				}
			}
			&[style*="padding-right: 0"],
			&[style*="padding-right:0"],
			&[style*="padding: 0"],
			&[style*="padding:0"] {
				> .alignfull {
					margin-right: 0;
				}
			}
		}
	}

// Text color.

	//
	// The CSS specificity here is 0-0-1 (the lowest possible),
	// or 0-0-2 in block editor, respectively.
	//
	// .has-background:
	//	Inherit link & heading color from `.has-background` container/wrapper.
	//
	//	This may be a bit tricky, as `.has-background` class is applied
	//	on a block even when just a background image or gradient is set
	//	(no specific background color is set). In that case there is no
	//	text color calculated and default block text color is used, and
	//	we override the default link & heading color in such cases.
	//	But WordPress provides setting option for link color on blocks,
	//	so it is OK to have this global link & heading color style.
	//
	//	@see  assets/scss/php/colors.scss
	//	@see  assets/scss/_tools/_mixin-color-classes.scss
	//
	// .has-text-color:
	// 	Inherit link & heading color from `.has-text-color` container/wrapper.
	// 	Having low priority here makes sure we don't override button text color.
	//
	@include wrap( '', '', 'html' ) {
		:where( .has-background, .has-text-color ) {

			:is(
				a,
				h1, h2, h3, h4, h5, h6
			) {
				color: inherit;
			}
		}
	}
