/**
 * Editor Post Title
 * - Needs a special styles
 */

.editor-post-title__block .editor-post-title__input {
	color: #{map-deep-get($config-global, "color", "foreground", "default")};
	font-family: #{map-deep-get($config-heading, "font", "family")};
	font-weight: #{map-deep-get($config-heading, "font", "weight")};
	font-size: (strip-unit(map-deep-get($config-heading, "font", "size", "h2")) + 0em);
	letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h2")};
	line-height: #{map-deep-get($config-heading, "font", "line-height", "h2")};
}

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

.has-primary-color[class] {
	color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
}

.has-secondary-color[class] {
	color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
}

.has-foreground-color[class] {
	color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
}

.has-foreground-light-color[class] {
	color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
}

.has-foreground-dark-color[class] {
	color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
}

.has-background-light-color[class] {
	color: #{map-deep-get($config-global, "color", "background", "light")} !important;
}

.has-background-dark-color[class] {
	color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
}

.has-background-color[class] {
	color: #{map-deep-get($config-global, "color", "background", "default")} !important;
}

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

.has-primary-background-color[class] {
	background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
	color: #{map-deep-get($config-global, "color", "background", "default")};
	p, h1, h2, h3, h4, h5, h6 {
		color: currentColor;
	}
}

.has-secondary-background-color[class] {
	background-color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
	color: #{map-deep-get($config-global, "color", "background", "default")};
	p, h1, h2, h3, h4, h5, h6 {
		color: currentColor;
	}
}

.has-foreground-background-color[class] {
	background-color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
	color: #{map-deep-get($config-global, "color", "background", "default")};
	p, h1, h2, h3, h4, h5, h6 {
		color: currentColor;
	}
}

.has-foreground-light-background-color[class] {
	background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
	color: #{map-deep-get($config-global, "color", "background", "default")};
	p, h1, h2, h3, h4, h5, h6 {
		color: currentColor;
	}
}

.has-foreground-dark-background-color[class] {
	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
	color: #{map-deep-get($config-global, "color", "background", "default")};
	p, h1, h2, h3, h4, h5, h6 {
		color: currentColor;
	}
}

.has-background-light-background-color[class] {
	background-color: #{map-deep-get($config-global, "color", "background", "light")} !important;
	color: #{map-deep-get($config-global, "color", "foreground", "default")};
	p, h1, h2, h3, h4, h5, h6 {
		color: currentColor;
	}
}

.has-background-dark-background-color[class] {
	background-color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
	color: #{map-deep-get($config-global, "color", "foreground", "default")};
	p, h1, h2, h3, h4, h5, h6 {
		color: currentColor;
	}
}

.has-background-background-color[class] {
	background-color: #{map-deep-get($config-global, "color", "background", "default")} !important;
	color: #{map-deep-get($config-global, "color", "foreground", "default")};
	p, h1, h2, h3, h4, h5, h6 {
		color: currentColor;
	}
}

// Gutenberg Font-size utility classes
.is-small-text,
.has-small-font-size {
	font-size: (strip-unit(map-deep-get($config-global, "font", "size", "sm")) + 0em);
}

.is-regular-text,
.has-regular-font-size,
.has-normal-font-size,
.has-medium-font-size {
	font-size: (strip-unit(map-deep-get($config-global, "font", "size", "md")) + 0em);
}

.is-large-text,
.has-large-font-size {
	font-size: (strip-unit(map-deep-get($config-global, "font", "size", "lg")) + 0em);
	line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
}

.is-larger-text,
.has-larger-font-size,
.has-huge-font-size {
	font-size: (strip-unit(map-deep-get($config-global, "font", "size", "xl")) + 0em);
	line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
}

// Drop cap
.has-drop-cap:not(:focus)::first-letter {
	font-family: #{map-deep-get($config-heading, "font", "family")};
	font-size: calc(2 * #{strip-unit(map-deep-get($config-heading, "font", "size", "h1")) + 0em});
	font-weight: #{map-deep-get($config-heading, "font", "weight")};
}
