@use "abstracts/__index" as *;
@use "base/box-sizing" as *;
@use "base/form" as *;
@use "base/globals" as *;
@use "base/heading" as *;
@use "base/list" as *;
@use "base/table" as *;
@use "base/typography" as *;
// @import "layout/columns";
@use "components/blocks/_index-editor" as *;
@use "components/entry/_index" as *;
@use "utilities/_index" as *;

html {
	// font-size: 100%; // 16px browser default. This was breaking after the changes in 2.38.0.
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	min-height: auto;
	--viewport-width: calc(100vw - var(--admin-menu-width, 160px) - var(--block-sidebar-width, 0px)); // Requires 0px for calc(). These are both in admin.scss too. Not sure if we need both.
	--editor-viewport-width: calc(100vw - var(--admin-menu-width, 160px) - var(--block-sidebar-width, 0px)); // Requires 0px for calc(). These are both in admin.scss too. Not sure if we need both.
	--list-item-margin-bottom: var(--spacing-xs);

	@extend %body;
}

p {
	font-size: var(--body-font-size, var(--font-size-md));
}

ul.wp-block,
ol.wp-block {
	margin: var(--list-margin, var(--list-margin-top, 0) var(--list-margin-right, 0) var(--list-margin-bottom, var(--spacing-sm)) var(--list-margin-left, 1.75em));
	padding: var(--list-padding, 0);
	list-style-position: var(--list-style-position, outside);
	line-height: var(--list-line-height, var(--line-height-md));

	ul.wp-block,
	ol.wp-block {
		margin: var(--sub-list-margin, (var(--spacing-sm) 0 var(--spacing-sm) 1em));
	}
}

ul.wp-block li.wp-block,
ol.wp-block li.wp-block {
	margin: var(--list-item-margin, var(--list-item-margin-top, 0) var(--list-item-margin-right, 0) var(--list-item-margin-bottom, 0) var(--list-item-margin-left, 0));
}

.edit-post-visual-editor__post-title-wrapper {
	margin-bottom: var(--spacing-md); // this element is using var(--wp--style--block-gap) which is not defined in this non-FSE theme.
}

.editor-post-title__block .editor-post-title__input {

	@extend %heading;
}

.block-editor-block-list__block .block-list-appender.block-list-appender {
	// These are 0 in WP so the appender isn't centered by default.
	margin-right: auto;
	margin-left: auto;
}

.block-editor-plain-text {
	/* TODO: Make this work if body color is set to white. */
	/* TODO: --input-color: #000; is necessary when this happens as well. */
	color: var(--color-body); /* Overrides WP core styles. Mostly for dark backgrounds when the text is changed to white. */
}

// FYI: The has-dark-background class is not automatically added to Group blocks with dark color in the editor.
.has-dark-background {

	@extend %dark-bg;
}

.has-light-background {
	color: var(--color-body);
	--heading-color: var(--color-heading);
}

.has-inline-color.has-link-color {
	color: var(--color-link);
}

.alignfull {
	width: 100%;
	max-width: 100%;
	margin-right: 0;
	margin-left: 0;
}

.wp-block.is-reusable {
	max-width: unset !important;
	margin-right: 0;
	margin-left: 0;
}

[data-type="core/pullquote"][data-align="left"],
[data-type="core/pullquote"][data-align="right"] {
	max-width: 290px; // Match WP core front end styles.
	overflow: hidden;
}

[data-type="core/pullquote"][data-align="left"] {
	float: left;
}

[data-type="core/pullquote"][data-align="right"] {
	float: right;
}

// Not sure why the editor markup for these blocks is so different, but we need space in editor.
.wp-block-quote__citation,
.wp-block-pullquote__citation {
	margin-top: var(--spacing-sm);
}

.block-editor-block-list__layout {

	> [data-type="core/group"],
	> [data-type="core/cover"],
	> [data-type="acf/mai-post-grid"] {
		margin-top: 0;
		margin-bottom: 0;
	}
}

.wp-block[data-align="full"] > .wp-block-group {
	padding-right: var(--side-spacing);
	padding-left: var(--side-spacing);
}

.wp-block[data-align="full"] > .wp-block-cover {
	padding-right: var(--side-spacing);
	padding-left: var(--side-spacing);
}

[data-content-align="start"] {
	--group-block-justify-content: start;
	--cover-block-justify-content: start;

	> .wp-block-group__inner-container > .wp-block:not([data-align="full"]),
	> .wp-block-cover__inner-container > .wp-block:not([data-align="full"]) {
		margin-left: unset;
	}

	> .wp-block-group__inner-container > .wp-block[data-align="full"],
	> .wp-block-cover__inner-container > .wp-block[data-align="full"] {
		width: var(--editor-viewport-width);
		margin-left: calc(var(--side-spacing) * -1) !important;
	}
}

[data-content-align="center"] {
	--group-block-justify-content: center;
	--cover-block-justify-content: center;
}

[data-content-align="end"] {
	--group-block-justify-content: end;
	--cover-block-justify-content: end;

	> .wp-block-group__inner-container > .wp-block:not([data-align="full"]),
	> .wp-block-cover__inner-container > .wp-block:not([data-align="full"]) {
		margin-right: unset;
	}

	> .wp-block-group__inner-container > .wp-block[data-align="full"],
	> .wp-block-cover__inner-container > .wp-block[data-align="full"] {
		width: var(--editor-viewport-width);
		margin-right: calc(var(--side-spacing) * -1) !important;
	}
}

p[data-content-align="start"],
.wp-block-heading[data-content-align="start"] {
	margin-left: 0;
}

p[data-content-align="end"],
.wp-block-heading[data-content-align="end"] {
	margin-right: 0;
}

/**
 * This is padding on enableLayoutSettingsBlocks.
 *
 * 'core/cover',
 * 'core/group',
 */
@each $padding-name, $padding-size in $padding_scale {

	@each $padding-setting in $padding_settings {

		.wp-block-cover[data-spacing-#{ $padding-setting }="#{ $padding-name }"],
		.wp-block-group[data-spacing-#{ $padding-setting }="#{ $padding-name }"] {
			padding-#{ $padding-setting }: #{ $padding-size } !important;
		}
	}
}

/**
 * Max width on enableMaxWidthSettingsBlocks.
 *
 * 'core/heading',
 * 'core/paragraph',
 *
 * and enableLayoutSettingsBlocks.
 *
 * 'core/cover',
 * 'core/group',
 */
@each $breakpoint-name, $breakpoint-size in $breakpoints {

	[data-type="core/heading"][data-max-width="#{ $breakpoint-name }"],
	[data-type="core/paragraph"][data-max-width="#{ $breakpoint-name }"] {
		--wp-block-max-width: var(--breakpoint-#{ $breakpoint-name });
	}

	// We don't need to worry about nested block here,
	// since their content should never be larger than the parent.
	[data-content-width="#{ $breakpoint-name }"] {
		--content-max-width: var(--breakpoint-#{ $breakpoint-name });
		--wp-block-max-width: var(--breakpoint-#{ $breakpoint-name });
	}
}

[data-content-width="no"] {
	--content-max-width: var(--viewport-width);
	--wp-block-max-width: var(--viewport-width);
	--side-spacing: 0;
}

/**
 * This is margin on enableSpacingSettingsBlocks.
 *
 * 'core/heading',
 * 'core/paragraph',
 * 'core/separator',
 */
@each $margin-name, $margin-size in $spacing {

	@each $margin-setting in $margin_settings {

		.wp-block-heading[data-spacing-#{ $margin-setting }="#{ $margin-name }"],
		.wp-block-paragraph[data-spacing-#{ $margin-setting }="#{ $margin-name }"],
		.wp-block-separator[data-spacing-#{ $margin-setting }="#{ $margin-name }"] {
			--heading-margin-#{ $margin-setting }: #{ $margin-size };
			--separator-block-margin-#{ $margin-setting }: #{ $margin-size };
			--paragraph-margin-#{ $margin-setting }: #{ $margin-size };
		}
	}
}

/**
 * This is margin on enableMarginSettingsBlocks.
 *
 * 'core/image',
 * 'core/cover',
 * 'core/group',
 */
@each $margin-name, $margin-size in $margin {

	@each $margin-setting in $margin_settings {

		.wp-block-image[data-margin-#{ $margin-setting }="#{ $margin-name }"],
		.wp-block-cover[data-margin-#{ $margin-setting }="#{ $margin-name }"],
		.wp-block-group[data-margin-#{ $margin-setting }="#{ $margin-name }"] {
			margin-#{ $margin-setting }: #{ $margin-size } !important;
		}
	}
}

/**
 * This is negative margin on enableMarginSettingsBlocks.
 *
 * 'core/image',
 * 'core/cover',
 * 'core/group',
 */
@each $margin-name, $margin-size in $negative_margin {

	@each $margin-setting in $margin_settings {

		.wp-block-image[data-margin-#{ $margin-setting }="#{ $margin-name }"],
		.wp-block-cover[data-margin-#{ $margin-setting }="#{ $margin-name }"],
		.wp-block-group[data-margin-#{ $margin-setting }="#{ $margin-name }"] {
			margin-#{ $margin-setting }: calc(#{ $margin-size } * -1) !important;
			position: relative;
			z-index: 1;
		}
	}
}

@each $margin-setting in $margin_settings {

	[data-margin-#{ $margin-setting }="no"] {
		margin-#{ $margin-setting }: 0 !important;
	}
}

@each $size-name, $size-value in $font_sizes {

	[data-font-size="#{ $size-name }"] > .rich-text {
		font-size: #{ $size-value };
	}
}

// Our default of 0 left/right margin caused overlap in editor.
.wp-block-image {
	margin-right: auto;
	margin-left: auto;
}

// button, // This breaks core block control buttons.
input[type="submit"],
.wp-block-button__link,
.wp-block .button {
	min-height: 1px; // Makes sure block styles are rendered correctly in editor. See #303.

	@extend %button;
	@extend %button-editor;

	// Default block style preview.
	.is-style-default & {

		@extend %button;
		@extend %button-editor;
	}

	&:active,
	&:visited {
		color: var(--button-color-hover, var(--button-color));
	}

	.is-style-secondary & {

		@extend %button-secondary;
		@extend %button-editor;
	}

	.is-style-link & {

		@extend %button-link;
		@extend %button-editor;
	}

	.is-style-outline & {

		@extend %button-outline;
		@extend %button-editor;
	}

	.button-small & {

		@extend %button-small;
		@extend %button-editor;
	}

	.button-large & {

		@extend %button-large;
		@extend %button-editor;
	}
}

.entry-more.is-style-link .wp-block-button__link,
.entry-more:not([class*="is-style-link"]):not([class*="is-style-"]) .wp-block-button__link {
	padding: 0;
}

// Remove default spacing on .wp-block from classic.css in WP core.
.mai-divider {
	margin-top: -28px;
	margin-bottom: -28px;
}

.wp-block-search {

	// When no alignment is set the wp-block is the same as the search block.
	// When you set alignment it adds wp-block as a wrapper. Strange.
	&.wp-block {
		margin-right: auto;
		margin-left: auto;
	}

	.wp-block[data-align="left"] & {
		justify-content: start;
	}

	.wp-block[data-align="center"] & {
		justify-content: center;
	}

	.wp-block[data-align="right"] & {
		justify-content: end;
	}

	.wp-block-search__input {
		width: auto;
		min-width: var(--search-input-min-width, 0);
		max-width: var(--search-input-max-width, 320px);
		font-size: var(--font-size-md);
		-webkit-appearance: none;
	}

	.wp-block-search__button {
		height: auto !important;

		@extend %button;
		@extend %button-editor;
		@extend %button-secondary;

		&.has-icon {
			position: relative;
			height: 100%;

			svg {
				position: absolute;
				top: calc(50% - 12px);
				left: calc(50% - 12px);
				width: 24px;
				height: 24px;
				fill: currentColor;
			}
		}
	}
}

.mai-grid a {
	pointer-events: none;
}

.entry-grid {
	order: var(--entry-order, var(--entry-index, var(--order, unset))) !important;
}

// Columns.

.has-columns:not(.has-columns-nested) {
	--flex-basis: calc((100% * var(--columns) - (var(--column-gap) * (1 - var(--columns)))) - 0.025px); // Removes 0.025px to prevent margin collapsing.
	--flex-default: 0 0 var(--flex-basis);

	@include mq(false, sm) {
		--flex: var(--flex-xs, var(--flex-default));
		--columns: var(--columns-xs, 1/1);
		--order: var(--order-xs, unset);
	}

	@include mq(sm, md) {
		--flex: var(--flex-sm, var(--flex-default));
		--columns: var(--columns-sm, 1/1);
		--order: var(--order-sm, unset);
	}

	@include mq(md, lg) {
		--flex: var(--flex-md, var(--flex-default));
		--columns: var(--columns-md, 1/1);
		--order: var(--order-md, unset);
	}

	@include mq(lg) {
		--flex: var(--flex-lg, var(--flex-default));
		--columns: var(--columns-lg, 1/1);
	}
}

.has-columns:not(.has-columns-nested),
.has-columns-nested > .acf-innerblocks-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--row-gap) var(--column-gap);
	align-items: var(--align-columns-vertical, initial); // Needs initial for nested columns.
	justify-content: var(--align-columns, initial); // Needs initial for nested columns.
}

// Column & Mai Column.

.has-columns-nested:not(.mai-columns),
.mai-columns > .mai-columns-wrap > .acf-innerblocks-container > .wp-block {
	--flex-basis: calc((100% * var(--columns) - (var(--column-gap) * (1 - var(--columns)))) - 0.025px); // Removes 0.025px to prevent margin collapsing.
	--flex-default: 0 0 var(--flex-basis);

	@include mq(false, sm) {
		--flex: var(--flex-xs, var(--flex-default));
		--columns: var(--columns-xs, 1/1);
		--order: var(--order-xs, unset);
	}

	@include mq(sm, md) {
		--flex: var(--flex-sm, var(--flex-default));
		--columns: var(--columns-sm, 1/1);
		--order: var(--order-sm, unset);
	}

	@include mq(md, lg) {
		--flex: var(--flex-md, var(--flex-default));
		--columns: var(--columns-md, 1/1);
		--order: var(--order-md, unset);
	}

	@include mq(lg) {
		--flex: var(--flex-lg, var(--flex-default));
		--columns: var(--columns-lg, 1/1);
	}
}

//  Column.

.has-columns:not(.has-columns-nested) > .is-column,
.has-columns-nested > .acf-innerblocks-container > .wp-block {
	flex: var(--flex, var(--flex-default));
	order: var(--order, unset);
	// overrides core editor margin on wp-block
	margin: 0;
	// Fixes search block weirdness and other flex issues.
	// @link https://defensivecss.dev/tip/flexbox-min-content-size/
	// @link https://dfmcphee.com/flex-items-and-min-width-0/
	min-width: 0;
}

.has-columns-nested > .acf-innerblocks-container > .wp-block > .is-column {
	height: 100%;
}

// Mai Columns

.mai-columns > .mai-columns-wrap > .acf-innerblocks-container > .wp-block > .mai-column {
	display: flex;
	flex-direction: column;
	justify-content: var(--justify-content, start);
}

// This is also handled for dark body in admin.scss.
.has-dark-background {
	--mai-block-appender-color: var(--color-white);
}

.has-light-background {
	--mai-block-appender-color: #1e1e1e;
}

.mai-column .block-editor-block-list__layout[data-is-drop-zone="true"]:empty {
	position: relative;
	width: 100%;
	height: 36px;
	box-shadow: inset 0 0 0 1px var(--mai-block-appender-color, #1e1e1e);
}

// This is only needed if you delete the empty "Type / to choose a block" element from the column.
.mai-column .block-editor-block-list__layout[data-is-drop-zone="true"]:empty::after {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--mai-block-appender-color, #1e1e1e);
	font-size: 24px;
	content: "+";
}

.mai-column .block-editor-block-list__layout[data-is-drop-zone="true"]:empty:hover,
.mai-column .block-editor-block-list__layout[data-is-drop-zone="true"]:empty:focus {
	--mai-block-appender-color: var(--wp-admin-theme-color);
	cursor: pointer;
}

// Mai Accordion.

.wp-block[data-type="acf/mai-accordion-item"] {
	margin-bottom: var(--row-gap);
}

.wp-block[data-type="acf/mai-accordion-item"] .mai-accordion-item {
	margin-bottom: 0;
}

.wp-block[data-type="acf/mai-accordion-item"] + .wp-block[data-type="acf/mai-accordion-item"] {
	margin-top: 0;
}