/* Block Alignments */

/**
 * .alignleft
 */
.alignleft {

	/*rtl:ignore*/
	text-align: left;

	/*rtl:ignore*/
	float: left;
	margin-top: 0;

	/*rtl:ignore*/
	margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
	margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
}

.entry-content > .alignleft {

	/*rtl:ignore*/
	float: left;

	@extend %responsive-alignleft;
}

/**
 * .aligncenter
 */
.aligncenter {
	clear: both;
	display: block;
	float: none;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

/**
 * .alignright
 */
.alignright {

	/*rtl:ignore*/
	float: right;
	margin-top: 0;
	margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};

	/*rtl:ignore*/
	margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
}

.entry-content > .alignright {

	/*rtl:ignore*/
	float: right;

	@extend %responsive-alignright;
}

// Make sure siblings of floated elements are top-aligned when nested
.entry-content * > .alignleft + *,
.entry-content * > .alignright + * {
	margin-top: 0;
}

/**
 * .aligndefault
 */
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
.entry-content > *:not(.wp-block-button),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {

	@extend %responsive-aligndefault;
}

/**
 * .alignwide
 */
.alignwide {
	clear: both;
}

.entry-content > .alignwide {

	@extend %responsive-alignwide;
}

.entry-content > .alignwide [class*="inner-container"] > .alignwide {

	@extend %responsive-alignwide-nested;
}

/**
 * .alignfull
 */
.alignfull {
	clear: both;
}

.entry-content > .alignfull {

	@extend %responsive-alignfull;
}

.entry-content > .alignfull [class*="inner-container"] > .alignwide {

	@extend %responsive-alignwide-nested;
}

// Content alignment
.has-left-content {
	justify-content: flex-start;
}

.has-right-content {
	justify-content: flex-end;
}

// Parallax
.has-parallax {
	background-attachment: fixed;
}

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

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

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

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

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

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

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

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

.has-background-dim,
.has-background-color {
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

@if map-has-key(map-deep-get($config-global, "color"), "tertiary") {

	.has-tertiary-color {
		color: #{map-deep-get($config-global, "color", "tertiary", "default")};
	}
}

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

	p:not(.has-text-color),
	h1:not(.has-text-color),
	h2:not(.has-text-color),
	h3:not(.has-text-color),
	h4:not(.has-text-color),
	h5:not(.has-text-color),
	h6:not(.has-text-color) {
		color: currentcolor;
	}
}

.has-primary-background-color,
.has-primary-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
}

.has-primary-background-color:not(.has-text-color),
.has-primary-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

.has-secondary-background-color,
.has-secondary-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
}

.has-secondary-background-color:not(.has-text-color),
.has-secondary-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

.has-background-dim,
.has-foreground-background-color,
.has-foreground-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "foreground", "default")};
}

.has-background-dim,
.has-foreground-background-color:not(.has-text-color),
.has-foreground-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

.has-foreground-light-background-color,
.has-foreground-light-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "foreground", "light")};
}

.has-foreground-light-background-color:not(.has-text-color),
.has-foreground-light-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

.has-foreground-dark-background-color,
.has-foreground-dark-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")};
}

.has-foreground-dark-background-color:not(.has-text-color),
.has-foreground-dark-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

.has-background-light-background-color,
.has-background-light-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "background", "light")};
}

.has-background-light-background-color:not(.has-text-color),
.has-background-light-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "foreground", "default")};
}

.has-background-dark-background-color,
.has-background-dark-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "background", "dark")};
}

.has-background-dark-background-color:not(.has-text-color),
.has-background-dark-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "foreground", "default")};
}

.has-background-background-color,
.has-background-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "background", "default")};
}

.has-background-background-color:not(.has-text-color),
.has-background-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "foreground", "default")};
}

@if map-has-key(map-deep-get($config-global, "color"), "tertiary") {

	.has-tertiary-background-color,
	.has-tertiary-background-color.has-background-dim {
		background-color: #{map-deep-get($config-global, "color", "tertiary", "default")};
	}

	.has-tertiary-background-color:not(.has-text-color),
	.has-tertiary-background-color.has-background-dim:not(.has-text-color) {
		color: #{map-deep-get($config-global, "color", "foreground", "default")};
	}
}

// Gutenberg Font-size options
.is-small-text,
.has-small-font-size {
	font-size: #{map-deep-get($config-global, "font", "size", "sm")};
}

.is-regular-text,
.has-regular-font-size,
.has-normal-font-size,
.has-medium-font-size {
	font-size: #{map-deep-get($config-global, "font", "size", "base")};
}

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

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

// Drop caps
.has-drop-cap:not(:focus)::first-letter {

	@include font-family( map-deep-get($config-heading, "font", "family") );
	font-size: calc(2 * #{map-deep-get($config-heading, "font", "size", "h1")});
	font-weight: #{map-deep-get($config-heading, "font", "weight")};
	line-height: 0.66;
	text-transform: uppercase;
	font-style: normal;
	float: left;
	margin: 0.1em 0.1em 0 0;
}

.has-drop-cap:not(:focus)::after {
	content: "";
	display: table;
	clear: both;
	padding-top: 14px;
}

.desktop-only {
	display: none;

	@include media(mobile) {
		display: block;
	}
}

/**
 * Spacing Overrides
 */

@import "spacing-overrides";