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

// Gutenberg text color options
.has-text-color {}

.has-primary-color[class] {
	color: var(--global--color-primary);
}

.has-secondary-color[class] {
	color: var(--global--color-secondary);
}

.has-foreground-color[class] {
	color: var(--global--color-foreground);
}

.has-foreground-low-contrast-color[class] {
	color: var(--global--color-foreground-low-contrast);
}

.has-foreground-high-contrast-color[class] {
	color: var(--global--color-foreground-high-contrast);
}

.has-tertiary-color[class] {
	color: var(--global--color-tertiary);
}

.has-background-dark-color[class] {
	color: var(--global--color-background-dark);
}

.has-background-color[class] {
	color: var(--global--color-background);
}

.has-primary-background-color[class] {
	background-color: var(--global--color-primary);
	color: var(--global--color-background);
}

.has-primary-background-color[class] {
	background-color: var(--global--color-primary);
	color: var(--global--color-background);
}

.has-secondary-background-color[class] {
	background-color: var(--global--color-secondary);
	color: var(--global--color-background);
}

.has-foreground-background-color[class] {
	background-color: var(--global--color-foreground);
	color: var(--global--color-background);
}

.has-foreground-light-background-color[class] {
	background-color: var(--global--color-foreground-low-contrast);
	color: var(--global--color-background);
}

.has-foreground-high-contrast-background-color[class] {
	background-color: var(--global--color-foreground-high-contrast);
	color: var(--global--color-background);
}

.has-tertiary-background-color[class] {
	background-color: var(--global--color-tertiary);
	color: var(--global--color-foreground);
}

.has-background-dark-background-color[class] {
	background-color: var(--global--color-background-dark);
	color: var(--global--color-foreground);
}

.has-background-background-color[class] {
	background-color: var(--global--color-background);
	color: var(--global--color-foreground);
}

.has-white-background-color[class] {
	background-color: var(--global--color-white);
	color: var(--global--color-secondary);
}

.has-black-background-color[class] {
	background-color: var(--global--color-black);
	color: var(--global--color-primary);
}

// Gutenberg Font-size utility classes
.is-tiny-text,
.has-tiny-font-size {
	font-size: var(--global--font-size-xs);
}

.is-small-text,
.has-small-font-size {
	font-size: var(--global--font-size-sm);
}

.is-regular-text,
.has-regular-font-size,
.has-normal-font-size,
.has-medium-font-size {
	font-size: var(--global--font-size-md);
}

.is-large-text,
.has-large-font-size {
	font-size: var(--global--font-size-lg);
	line-height: var(--global--line-height-heading);
}

.is-larger-text,
.has-larger-font-size,
.has-huge-font-size {
	font-size: var(--global--font-size-xl);
	line-height: var(--global--line-height-heading);
}

// Drop cap
.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--heading--font-family);
	font-size: calc(2 * var(--heading--font-size-h1));
	font-weight: var(--heading--font-weight);
}

/**
 * Spacing Overrides
 */

 @import "spacing-overrides";

[data-block] {
	margin-top: var(--global--spacing-vertical);
	margin-bottom: var(--global--spacing-vertical);
}

/*
 * Custom gradients
*/
.has-hard-diagonal-gradient-background {
	background: linear-gradient(to bottom right, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
}

.has-hard-diagonal-inverted-gradient-background {
	background: linear-gradient(to top left, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
}

.has-diagonal-gradient-background {
	background: linear-gradient(to bottom right, var(--global--color-secondary), var(--global--color-tertiary));
}

.has-diagonal-inverted-gradient-background {
	background: linear-gradient(to top left, var(--global--color-secondary), var(--global--color-tertiary));
}

.has-hard-horizontal-gradient-background {
	background: linear-gradient(to bottom, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
}

.has-hard-horizontal-inverted-gradient-background {
	background: linear-gradient(to top, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
}

.has-horizontal-gradient-background {
	background: linear-gradient(to bottom, var(--global--color-secondary), var(--global--color-tertiary));
}

.has-horizontal-inverted-gradient-background {
	background: linear-gradient(to top, var(--global--color-secondary), var(--global--color-tertiary));
}

.has-stripe-gradient-background {
	background: linear-gradient(to bottom, transparent 20%, var(--global--color-secondary) 20%, var(--global--color-secondary) 80%, transparent 80%);
}

/* Block Alignments */
.wp-block {

	// Gutenberg injects a rule that limits the max width of .wp-block to 580px
	// This line overrides it to use the responsive spacing rules for default width content
	max-width: var(--responsive--aligndefault-width);

	// Use the theme's max-width for wide alignment.
	&[data-align="wide"],
	&.alignwide {
		max-width: var(--responsive--alignwide-width);
	}

	&[data-align="full"],
	&.alignfull {
		max-width: none;
	}
}

// Selects the post editor and not the site editor
.block-editor-block-list__layout:not(.edit-site-block-editor__block-list){
	.wp-block {
		&[data-align="full"],
		&.alignfull {
			&>[data-block] {
				margin-top: 0;
				margin-bottom: 0;
			}
		}
	}
}

.alignleft {
	margin: 0;
	margin-right: var(--global--spacing-horizontal);
}

.alignright {
	margin: 0;
	margin-left: var(--global--spacing-horizontal);
}