@import "o-grid/main";
@import "o-visual-effects/main";

$ad-max-responsive-width: 1440px;

@mixin oAds {
	animation-name: none;
	//remove background from iframes.
	iframe {
		background: none transparent;
	}
}

@mixin oAdsCenter {
	width: 100%;
	text-align: center;
}

@mixin oAdsEmpty {
	width: 0;
	height: 0;
	display: none;
	visibility: hidden;
}

@mixin oAdsLabel($pos: 'left') {
	.o-ads__inner::before {
		content: "▼ Advertisement ▼";
		display: block;
		font-size: 14px;
		@if($pos == right) {
			text-align: right;
		}
	}
}

@mixin oAdsReserve90 {
	box-sizing: content-box;
	min-height: 90px;
	height: 90px;
	padding: 10px 0;
	overflow: hidden;

	&[data-o-ads-loaded="MediumRectangle"],
	&[data-o-ads-loaded="Billboard"] {
		height: 250px;
	}
}

@mixin oAdsReserve250 {
	box-sizing: content-box;
	height: 250px;
	min-height: 250px;
	padding: 10px 0;
	overflow: hidden;

	$baseSelector: &;

	&[data-o-ads-loaded="Leaderboard"],
	&[data-o-ads-loaded="SuperLeaderboard"] {
		.o-ads__outer {
			position: relative;
			top: 50%;
			margin-top: -45px;
		}

		&[data-o-ads-targeting="pos=top;"] .o-ads__outer {
			top: 100%;
			margin-top: -90px;
		}
	}

	@at-root:root[data-perf-janky="calm-middle"] {
		[data-o-ads-loaded="Leaderboard"],
		[data-o-ads-loaded="SuperLeaderboard"] {
			&#{$baseSelector}[data-o-ads-targeting="pos=top;"] .o-ads__outer {
				top: 50%;
				margin-top: -45px;
			}
		}
	}
}

@mixin oAdsResponsiveReserve {
		&[data-o-ads-loaded="Responsive"] {
			box-sizing: content-box;
			height: 250px;
			min-height: 250px;
			padding: 10px 0;
			@include oGridRespondTo($until: $ad-max-responsive-width) {
				height: auto;
				min-height: calc(100vw * 0.1734);
				padding: 0;
			}
			@include oGridRespondTo($until: S) {
				height: auto;
				min-height: calc(100vw * 0.481);
			}
		}
}

@mixin oAdsTransition {
	will-change: min-height, padding, height;
	transform: translate3d(0, 0, 0);
	transition: height 0.35s $o-visual-effects-timing-expand,
	min-height 0.35s $o-visual-effects-timing-expand,
	padding 0.35s $o-visual-effects-timing-expand;
}

@mixin oAdsLabelWithBorders($pos: 'left') {
	$padding: 25px;

	font-size: 14px;

	&:before,
	&:after {
		text-align: left;
		display: block;
		border-color: #ccc1b7;
		border-style: solid;
		border-width: 0;
	}

	&:before {
		content: 'Advertisement';
		padding: $padding 0 ($padding - 5px);
		margin-top: $padding / 2;
		border-top-width: 1px;
	}

	&:after {
		content: '';
		padding-top: $padding;
		border-bottom-width: 1px;
	}

	@if($pos == 'right') {
		text-align: right;
	}
}