@use "../01-abstract/variables" as *;
@use "../02-tools/f-context-selector" as *;
@use "../02-tools/f-get-gutter-width" as *;
@use "../02-tools/m-align" as *;
@use "../02-tools/m-editor-only" as *;
@use "../02-tools/m-heading" as *;

@include editor-only {
	// ----
	// Post title style
	// ----
	.editor-post-title {

		@include heading(h1);

		width: #{$container-wide};
		max-width: var(--responsive--alignwide-width);
		margin-bottom: var(--spacing--block-3);
	}

	// ----
	// Editor UI font styles
	// ----
	.wp-block.block-editor-default-block-appender > textarea {
		font-family: var(--global--font-secondary);
		font-size: $font-size-md;
	}

	// ----
	// Disable links in ACF blocks
	// The template block must have a ".block" class. Example : <div class="block block--my-custom-block">
	// ----
	.acf-block-preview {
		> .block {
			a,
			button {
				pointer-events: none;
			}
		}
	}
}

// ----
// Drop cap
// ----
.has-drop-cap:not(:focus)::first-letter {
	float: left;
	margin: .1em .1em 0 0;
	font-family: var($font-family-primary);
	font-size: calc(1.2 * var(--heading--font-size-h1));
	font-style: normal;
	font-weight: var(--heading--font-weight);
	line-height: .66;
	text-transform: uppercase;
}

#{context-selector(".blocks-container", ".is-root-container")} {
	// ----
	// Alignements horizontaux
	// ----
	> :where(*) {
		width: #{$container-default};
		max-width: var(--responsive--aligndefault-width);
		margin-right: auto;
		margin-left: auto;
	}

	#{context-selector(".alignwide", "[data-align='wide']")} {
		width: #{$container-wide};
		max-width: var(--responsive--alignwide-width);
	}

	#{context-selector(".alignfull", "[data-align='full']")} {
		width: 100%;
		max-width: var(--responsive--alignfull-width);
	}

	.alignleft {

		@include align;
	}

	.alignright {

		@include align(right);
	}

	.aligncenter {
		display: block;
		margin-right: auto;
		margin-left: auto;
		clear: both;
	}

	.alignleft,
	.alignright,
	.aligncenter {
		margin-bottom: var(--spacing--block-1);
	}

	:where(.is-layout-flex),
	:where(.is-layout-grid) {
		gap: get-gutter-width();
	}

	// ----
	// Alignements verticaux
	// ----
	> *,
	[class*="inner-container"]:not(.is-layout-grid) > * {
		margin-top: var(--spacing--block-1);
		margin-bottom: var(--spacing--block-1);

		&:first-child {
			margin-top: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}

		&.alignleft,
		&.alignright,
		&.alignleft:first-child + *,
		&.alignright:first-child + *,
		&.alignfull.has-background {
			margin-top: 0;
		}

		&:last-child,
		&.alignfull.has-background {
			margin-bottom: 0;
		}

		/* Reset alignleft and alignright margins after alignfull */
		&.alignfull + .alignleft,
		&.alignfull + .alignright {
			margin-top: var(--spacing--block-1);
		}
	}

	@include editor-only {

		> * {

			&:last-child {
				margin-bottom: var(--spacing--block-1);
			}
		}

		[class*="inner-container"] > * {
			max-width: none;
		}
	}
}
