@use "@wordpress/base-styles/variables" as *;

/**
 * Editor Normalization Styles
 *
 * These are only output in the editor, but styles here are prefixed .editor-styles-wrapper and affect the theming
 * of the editor by themes.
 */

// We use :where to keep specificity minimal.
// https://css-tricks.com/almanac/selectors/w/where/
:where(.editor-styles-wrapper) {
	// The following styles revert to the browser defaults overriding the WPAdmin styles.
	html & {
		font-family: serif; // unfortunately initial doesn't work for font-family.
		font-size: initial;
		line-height: initial;
		color: initial;

		// Many themes with white backgrounds load editor styles but fail to also provide
		// an explicit white background color, assuming a white editing canvas.
		// So to match browser defaults, we provide a white default here as well.
		background: #fff;
	}

	.wp-align-wrapper {
		max-width: $content-width;

		> .wp-block,
		&.wp-align-full {
			max-width: none;
		}

		&.wp-align-wide {
			max-width: $content-width;
		}
	}

	a {
		// This inherits the blue link color set by wp-admin, which is unfortunate.
		// However both inherit and unset properties set the color to black.
		transition: none;
	}

	code,
	kbd {
		padding: 0;
		margin: 0;
		background: inherit;
		font-size: inherit;
		font-family: monospace;
	}

	p {
		font-size: revert;
		line-height: revert;
		margin: revert;
	}

	ul,
	ol {
		margin: revert;
		padding: revert;
		list-style-type: revert;
		box-sizing: border-box;

		// Remove bottom margin from nested lists.
		ul,
		ol {
			margin: revert;
		}

		li {
			margin: revert;
		}
	}

	ul ul,
	ol ul {
		list-style-type: revert;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size: revert;
		margin: revert;
		color: revert;
		line-height: revert;
		font-weight: revert;
	}

	select {
		font-family: system-ui;
		appearance: revert;
		color: revert;
		border: revert;
		border-radius: revert;
		background: revert;
		box-shadow: revert;
		text-shadow: revert;
		outline: revert;
		cursor: revert;
		transform: revert;
		font-size: revert;
		line-height: revert;
		padding: revert;
		margin: revert;
		min-height: revert;
		max-width: revert;
		vertical-align: revert;
		font-weight: revert;
	}

	select:disabled,
	select:focus {
		color: revert;
		border-color: revert;
		background-color: revert;
		background-image: revert;
		box-shadow: revert;
		text-shadow: revert;
		cursor: revert;
		transform: revert;
	}
}