.wp-block-cover,
.wp-block-cover-image {

	background-color: #{map-deep-get($config-cover, "color", "background")};
	min-height: #{map-deep-get($config-cover, "height")};
	margin-top: inherit;
	margin-bottom: inherit;

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

	.wp-block-cover__inner-container,
	.wp-block-cover-image-text,
	.wp-block-cover-text {
		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
	}

	/* Treating H2 separately to account for legacy /core styles */
	h2 {
		font-size: #{map-deep-get($config-heading, "font", "size", "h2")};
		letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h2")};
		line-height: #{map-deep-get($config-heading, "font", "line-height", "h2")};
		max-width: inherit; // undo opinionated styles
		text-align: inherit; // undo opinionated styles
		padding: 0;

		&.has-text-align-left {
			text-align: left;
		}

		&.has-text-align-center {
			text-align: center;
		}

		&.has-text-align-right {
			text-align: right;
		}
	}

	.wp-block-cover__inner-container {

		width: calc(100% - #{ 2 * map-deep-get($config-global, "spacing", "vertical") });

		& > * {
			margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
			margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };

			@include media(mobile) {
				margin-top: map-deep-get($config-global, "spacing", "vertical");
				margin-bottom: map-deep-get($config-global, "spacing", "vertical");
			}

			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	/**
	 * Block Options
	 */
	&.alignleft,
	&.alignright {
		margin-top: 0;

		> * {
			margin-top: calc(2 * #{map-deep-get($config-global, "spacing", "vertical")});
			margin-bottom: calc(2 * #{map-deep-get($config-global, "spacing", "vertical")});
			padding-left: #{map-deep-get($config-global, "spacing", "horizontal")};
			padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
			width: 100%;
		}
	}

	&.has-left-content,
	&.has-right-content {
		justify-content: center;
	}
}