@import "@automattic/components/src/styles/typography";
@import "@wordpress/base-styles/breakpoints";

.promote-post-i2 {
	.posts-list-woo-banner__container {
		background-color: #f7f2fa;

		.posts-list-banner__content,
		.tsp-banner__content {
			align-items: center;
			border: none;
			border-radius: 0;
			color: var(--color-text);
			display: flex;
			font-family: $font-sf-pro-text;
			font-style: normal;
			font-weight: 500;
			height: 392px;
			justify-content: space-between;
			letter-spacing: -0.01em;
			margin-bottom: 0;
			margin-left: 64px;
			padding: 0;

			.posts-list-banner__title {
				margin-bottom: 1rem;
			}

			.posts-list-banner__header {
				color: #8052b2;
				display: flex;
				font-size: 0.75rem;
				font-style: normal;
				font-weight: 600;
				line-height: 1.67;
				margin-bottom: 1rem;

				svg {
					margin-right: 0.5rem;
				}
			}

			.posts-list-banner__text-section {
				max-width: 475px;

				@media screen and (min-width: $break-wide) {
					max-width: 400px;
				}

				@media screen and (min-width: $break-huge) {
					max-width: 475px;
				}

				.posts-list-banner__title {
					color: #000;
					font-style: normal;
					font-weight: 400;
					font-size: 2.75rem;
					letter-spacing: 0.2px;
					line-height: 1.18;
				}
			}

			.posts-list-banner__img-section {
				position: relative;
				height: 392px;

				.posts-list-banner__img {
					display: none;
				}
			}
		}
	}

	#primary .promote-post-i2 .posts-list-woo-banner__container {
		border: none !important;
		background-color: #f7f2fa !important;
	}
}

@mixin blazepress-banner-mobile {
	.promote-post-i2 {
		.posts-list-woo-banner__container {
			display: none;
		}
	}

}

// Show Mobile view for screens if window width <= 782px
@media screen and (max-width: $break-medium) {
	@include blazepress-banner-mobile;
}

// Show Mobile view if sidebar is collapsed and main content width <= 782px
$break-medium-collapsed-menu: $break-medium + 36px;
@media screen and (max-width: $break-medium-collapsed-menu) {
	body.is-section-promote-post-i2.is-sidebar-collapsed {
		@include blazepress-banner-mobile;
	}
}

// Show Mobile view if sidebar is expanded and main content width <= 782px
$break-medium-expanded-menu: $break-medium + 272px;
@media screen and (max-width: $break-medium-expanded-menu) {
	body.is-section-promote-post-i2:not(.is-sidebar-collapsed) {
		@include blazepress-banner-mobile;
	}
}

@mixin blazepress-banner-desktop {
	.promote-post-i2 {
		.posts-list-woo-banner__container {
			.posts-list-banner__img-section {
				.posts-list-banner__img {
					background-size: cover;
					background-repeat: no-repeat;
					top: 0;
					display: block;
					height: 360px;
					position: absolute;
					right: 0;
					width: 526px;
				}
			}
		}
	}
}

// Show Blaze Banner (sidebar is collapsed)
@media screen and (min-width: 1044px) {
	// 1044px = 1280 ($break-wide) - 272 (expanded sidebar) + 36 (collapsed sidebar)
	body.is-section-promote-post-i2.is-sidebar-collapsed {
		@include blazepress-banner-desktop;
	}
}

// Show Blaze Banner (sidebar is expanded)
@media screen and (min-width: $break-wide) {
	body.is-section-promote-post-i2:not(.is-sidebar-collapsed) {
		@include blazepress-banner-desktop;
	}
}
