/* FILE: blocks/_blocks.scss */
// Global blocks styles.

// Fix for editor styles.
// For some reason the `.has-global-padding` class is not defined there (WP6.4).
@if true == $is_editor {
	.has-global-padding {

		&,
		&.alignfull {
			padding-right: var(--wp--style--root--padding-right);
			padding-left: var(--wp--style--root--padding-left);
		}

		.has-global-padding:not(.alignfull, .has-background) {
			padding-inline: 0;
		}
	}
}

// WP fix:
// @link  https://github.com/WordPress/gutenberg/issues/52721
.has-global-padding > .alignfull:where(:not(.has-global-padding)) > {

	.wp-block-column,
	.wp-block-image {

		&:not(.has-background) {
			padding-inline: 0;
		}

		&.has-background {
			padding-left: var(--theme--css--has-background--padding-left);
			padding-right: var(--theme--css--has-background--padding-right);
		}
	}
}

// Clearfix and empty containers.
// core/group
// core/post-content
// core/query
@if false == $is_editor {

	.wp-block-group:not(.is-layout-flex, .is-layout-grid),
	.wp-block-post-content {
		@extend %clearfix;
	}

	// @see  WebManDesign\Zooey\Content\Block::render__empty()
	.wp-block-group,
	.wp-block-query {

		&:empty,
		&.is-empty {

			&:not(.is-not-hidden) {
				display: none;
			}
		}
	}
}

// Making Cover block post thumbnail more visible in editor.
// core/cover
@if true == $is_editor {

	.components-placeholder {

		&.has-illustration:before {
			background: #000;
		}

		&__illustration {
			opacity: 1;
		}
	}
}

// Fix for Image block in editor.
// core/image
@if true == $is_editor {

	.wp-block-image .components-resizable-box__container {
		max-width: 100% !important;
	}
}

// Firefox `aspect-ratio` issue fix.
// @link  https://stackoverflow.com/questions/70159006/css-aspect-ratio-not-working-properly-in-firefox
.wp-block-image [style*="aspect-ratio:"] {
	width: 100%;
}

// Fixing text color within Cover block in editor.
// core/cover
@if true == $is_editor {

	.wp-block-cover,
	.wp-block-cover-image {

		&[class] {

			h1, h2, h3, h4, h5, h6,
			p {

				&:where(:not(.has-text-color)) {
					color: inherit;
				}
			}
		}
	}
}

// Multi-block styles.

	// Layout

		.is-style-page-header {
			position: relative;
			z-index: 2;
		}

	// Backdrop blur.

		//
		// Found out that when `position: fixed;` is used in a container
		// with `backdrop-filter` style, the positioning scope is not the
		// viewport, but the actual container.
		//
		// To prevent this CSS rendering issue, we can set the backdrop
		// blur with a pseudo element. This should be perfectly fine
		// in regards of layout and it also seems to produce the same
		// color results (check https://codepen.io/webmandesign/pen/KKJjOQv).
		//
		// (Found this issue when testing responsive navigation on Overlaid
		// Header custom template.)
		//
		// The only issue with applying `backdrop-blur` with a pseudo element
		// could be when container has border set and border radius at the same
		// time. But even this issue has a solution by adding an internal container
		// element which could hold the actual border styles.
		//
		.is-style-backdrop-blur {

			@if false == $is_editor {
				position: relative;

				&::before {
					content: '';
					position: absolute;
					inset: 0;
					border-radius: inherit;
					z-index: -1;
					backdrop-filter: blur( var(--wp--custom--filter--blur--backdrop) );
				}

			} @else {

				//
				// Unfortunately, the pseudo element solution does not work
				// in patterns inserter/selector in editor, so we need to
				// use direct solution. But this is OK as there is no fixed
				// positioning used in editor anyway.
				//
				backdrop-filter: blur( var(--wp--custom--filter--blur--backdrop) );
			}
		}

	// Outline button.

		.is-style-button-outline {
			--theme--css--button--color--background: transparent;
			--theme--css--button--color--text: currentColor;
			--theme--css--button--color--border: currentColor;
			--theme--css--button--color--outline: currentColor;
		}

	// Custom Header image editor styles.

		@if true == $is_editor {

			.is-style-use-header-image {

				&,
				&-flip-v {

					&::before {
						content: '';
						position: absolute;
						width: 52px;
						height: 52px;
						left: 50%;
						top: 50%;
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M14.48 11.06L7.41 3.99l1.5-1.5c.5-.56 2.3-.47 3.51.32c1.21.8 1.43 1.28 2.91 2.1c1.18.64 2.45 1.26 4.45.85zm-.71.71L6.7 4.7L4.93 6.47a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39.39 1.03 0 1.42c-.6.6-1.43 1.11-2.21 1.69c-.35.26-.7.53-1.01.84C1.43 14.23.4 16.08 1.4 17.07c.99 1 2.84-.03 4.18-1.36c.31-.31.58-.66.85-1.02c.57-.78 1.08-1.61 1.69-2.21a.996.996 0 0 1 1.41 0l1.06 1.06c.39.39 1.02.39 1.41 0z'/%3E%3C/svg%3E");
						background-color: #3858e9;
						background-repeat: no-repeat;
						background-position: 50% 50%;
						background-size: 32px 32px;
						border: 4px solid #fff;
						border-radius: 8px;
						box-shadow: 0 4px 12px rgba( #000, .5 );
						pointer-events: none;
						z-index: 1;
						transform: translateX(-50%) translateY(-50%);
					}
				}
			}
		}

	// Inline, inline buttons.

		.is-style-inline,
		.is-style-buttons-inline {
			--wp--style--block-gap: #{ $ratio_min + em } 1em;

			&,
			ul,
			ol {
				display: flex;
				flex-wrap: wrap;
				gap: var(--wp--style--block-gap);
			}

			&.aligncenter {

				&,
				ul,
				ol {
					justify-content: center;
				}
			}
		}

	// Padding left/right.

		$important: null;
		@if true == $is_editor {
			$important: !important;
		}

		@each $direction in ( left, right ) {
			$direction_oposite: right;
			@if right == $direction {
				$direction_oposite: left;
			}

			.is-style-padding-#{$direction} {
				padding-#{$direction}: var(--wp--style--root--padding-#{$direction});

				body .is-layout-constrained > &.wp-block-image {
					max-width: none $important;
					margin-left:  calc( var(--wp--style--root--padding-left)  * -1 ) !important;
					margin-right: calc( var(--wp--style--root--padding-right) * -1 ) !important;
				}

				body .is-layout-constrained.has-background > &.wp-block-image {
					margin-left:  calc( min( var(--wp--style--root--padding-left), var(--theme--css--has-background--padding-left) )   * -1 ) !important;
					margin-right: calc( min( var(--wp--style--root--padding-right), var(--theme--css--has-background--padding-right) ) * -1 ) !important;
				}

				img {
					display: block;
					width: 100% $important;
					max-width: calc( 50% + var(--wp--style--root--padding-#{$direction}) / 2 + ( var(--wp--style--global--content-size) / 2 ) ) $important;
					margin-inline: 0;
					margin-#{$direction}: auto;
					border-top-#{$direction_oposite}-radius: 0;
					border-bottom-#{$direction_oposite}-radius: 0;
				}

				&.alignwide,
				&.alignfull {

					img {
						max-width: calc( 50% + var(--wp--style--root--padding-#{$direction}) / 2 + ( var(--wp--style--global--wide-size) / 2 ) ) $important;
					}
				}
			}
		}

		@if true == $is_editor {
			.editor-styles-wrapper {

				.is-style-padding-left,
				.is-style-padding-right {

					.components-resizable-box__container {
						width: 100% !important;
						max-width: none !important;
					}
				}
			}

			// Pattern preview:
			.is-root-container > {

				.is-style-padding-left,
				.is-style-padding-right {
					max-width: none !important;
				}
			}
		}

	// Pull up/down.

		[class*="is-style-pull-"],
		// Apply also on WP6.6+ negative margin blocks.
		[style*="margin-top:-"], [style*="margin-top: -"],
		[style*="margin-right:-"], [style*="margin-right: -"],
		[style*="margin-bottom:-"], [style*="margin-bottom: -"],
		[style*="margin-left:-"], [style*="margin-left: -"] {
			position: relative;
			z-index: 5;
		}

		.is-style-pull-up-l {
			margin-top: var(--theme--css--pull) !important;
		}
		.is-style-pull-down-l {
			margin-bottom: var(--theme--css--pull) !important;
		}

		.is-style-pull-up-l,
		.is-style-pull-down-l {
			--theme--css--pull: var(--wp--custom--pull--l);
		}

		@if true == $is_editor {

			.wp-block-post-content > [class*="is-style-pull-up"]:first-child,
			.is-root-container:not(.wp-block-post-content) > [class*="is-style-pull-"]:first-child, // In style preview only.
			{
				--theme--css--pull: 0px;
			}
		}

	// Responsive.

		.is-style-mobile {

			&-reverse {
				@include media( ( 782, 'max-width' ) ) { // WP breakpoint. Columns block responsive breakpoint.
					flex-direction: column-reverse;

					&.is-not-stacked-on-mobile {
						flex-direction: row-reverse;
					}
				}
			}

			&-only {
				@include media( ( 1025, 'min-width' ) ) { // 1024px breakpoint.
					// @see  WebManDesign\Zooey\Content\Block_Style::responsive_block_styles()
				}
			}

			&-hide {
				@include media( ( 1024, 'max-width' ) ) { // 1024px breakpoint.
					// @see  WebManDesign\Zooey\Content\Block_Style::responsive_block_styles()
				}
			}

			@if true == $is_editor {

				&-only,
				&-hide {

					&::before {
						content: '';
						position: absolute;
						width: 24px;
						height: 24px;
						inset-inline-end: 4px;
						inset-block-start: 4px;
						background-color: #3858e9;
						background-repeat: no-repeat;
						background-position: 50% 50%;
						border: 2px solid #fff;
						border-radius: 6px;
						pointer-events: none;
					}
				}

				&-only::before {
					background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="16" height="16" viewBox="0 0 256 256"%3E%3Cpath fill="white" d="M176 16H80a24 24 0 0 0-24 24v176a24 24 0 0 0 24 24h96a24 24 0 0 0 24-24V40a24 24 0 0 0-24-24M72 64h112v128H72Zm8-32h96a8 8 0 0 1 8 8v8H72v-8a8 8 0 0 1 8-8m96 192H80a8 8 0 0 1-8-8v-8h112v8a8 8 0 0 1-8 8"%2F%3E%3C%2Fsvg%3E');
				}

				&-hide::before {
					background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="16" height="16" viewBox="0 0 256 256"%3E%3Cpath fill="white" d="M208 40H48a24 24 0 0 0-24 24v112a24 24 0 0 0 24 24h72v16H96a8 8 0 0 0 0 16h64a8 8 0 0 0 0-16h-24v-16h72a24 24 0 0 0 24-24V64a24 24 0 0 0-24-24M48 56h160a8 8 0 0 1 8 8v80H40V64a8 8 0 0 1 8-8m160 128H48a8 8 0 0 1-8-8v-16h176v16a8 8 0 0 1-8 8"%2F%3E%3C%2Fsvg%3E');
				}
			}
		}

	// White space.

		.is-style-no-text-wrap {
			white-space: nowrap !important;
		}
