@use "../variables-site/variables-site";
@use "../mixins/mixins-main";
@use "../mixins/utilities";
@use "../variables-site/structure";

.newspack_global_ad {
	display: flex;
	justify-content: center;
	align-items: center;

	> * {
		margin-top: structure.$size__vertical-rhythm * 2;
		margin-bottom: structure.$size__vertical-rhythm * 2;
	}

	&.global_above_header {
		background-color: var(--newspack-theme-color-bg-pre);
	}

	&.sticky {
		background-color: var(--newspack-theme-color-bg-body);
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
		bottom: 0;
		display: none;
		position: fixed;
		width: 100%;
		z-index: 11;

		button {
			align-items: center;
			background-color: var(--newspack-theme-color-bg-body);
			border-radius: 0.75rem 0 0;
			box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
			color: var(--newspack-theme-color-text-main);
			display: flex;
			font-size: 1.25rem;
			height: 1.75rem;
			justify-content: center;
			padding: 0;
			position: absolute;
			right: 0;
			top: -1.75rem;
			width: 1.75rem;

			&::before {
				content: "×";
			}
		}

		> * {
			margin: 0;
			max-height: 100px;
		}
	}

	/* stylelint-disable selector-type-no-unknown  */
	amp-ad {
		vertical-align: bottom;
	}
}

.newspack_amp_sticky_ad {
	&__container {
		@include utilities.media( mobile ) {
			display: none;
		}
	}

	* {
		margin: auto;
	}

	.amp-sticky-ad-top-padding {
		display: none;
	}

	button,
	.amp-sticky-ad-close-button {
		background-color: var(--newspack-theme-color-bg-body);
		background-image: none;
		color: var(--newspack-theme-color-text-main);
		font-size: 1.25rem;

		&::before {
			content: "×";
			inset: 0;
		}

		&:focus,
		&:hover {
			background-color: inherit;
		}
	}
}

.widget_newspack-ads-widget .textwidget,
div[class*="newspack-ads-blocks-ad-unit"] {
	align-items: center;
	display: flex;
	justify-content: center;
}

body {
	// Reduce space on top of the content a bit when there's an ad below the header.
	&:not(.newspack-front-page) .newspack_global_ad.global_below_header + .site-content {
		margin-top: #{1.5 * structure.$size__spacing-unit};
	}
}

// The Subpage header + special featured image placements also can't really support an ad in this spot.
.h-sub {
	&.single-featured-image-beside,
	&.single-featured-image-behind {
		.global_below_header {
			display: none;
		}

		// Make sure above header ads don't end up behind the header.
		&.h-stk .global_above_header {
			position: relative;
			z-index: 1;
		}
	}

	&.single-featured-image-behind:not(.newspack-front-page) .global_below_header + .site-content {
		margin-top: 0;
	}

	@include utilities.media( tablet ) {
		&.single-featured-image-beside:not(.newspack-front-page)
		.global_below_header + .site-content {
			margin-top: 0;
		}
	}
}

.single-featured-image-behind .newspack_global_ad.global_below_header {
	margin-bottom: -1.5rem;
}

.custom-ad-bg {
	// Add a top margin to the above-footer ad, if a above footer widget doesn't exist.
	&:not(.af-widget) .newspack_global_ad.global_above_footer {
		margin-top: 2rem;
	}

	&.ad-above-footer .site-footer {
		margin-top: 0;
	}

	.newspack_global_ad > * {
		margin-bottom: 8px;
		margin-top: 8px;
	}

	.widget_newspack-ads-widget .textwidget,
	div[class*="newspack-ads-blocks-ad-unit"] {
		padding: 8px;
	}
}
