/// @access private
/// Outputs styles for ads embedded in videos
@mixin _oVideoAds {
	.o-video__overlay,
	.o-video__ad {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	// this element captures clicks when not using a placeholder
	.o-video__overlay {
		z-index: 1;
		cursor: pointer;
	}

	// The Google IMA ads SDK sets the size of the advert explicitly based on initial load size
	// (https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/apis#ima.AdsManager.init)
	// which can result in broken-looking ads if the viewport is resized or rotated while
	// the advert is present.  Override the advert div and frame sizes to full size to "fix".
	.o-video__ad {
		overflow: hidden;

		> div,
		> div > iframe {
			width: 100% !important; // stylelint-disable-line declaration-no-important
			height: 100% !important; // stylelint-disable-line declaration-no-important
		}
	}

	.o-video__loading-state {
		display: block;
		height: 100%;
		background: oPrivateFoundationGet('o3-color-palette-black');
		// HACK: to avoid stray half pixels peeking out when the viewport is resized
		outline: 2px solid oPrivateFoundationGet('o3-color-palette-black');

		&:after {
			@include oLoadingContent($opts: ('theme': 'light', 'size': 'small'));

			content: '';
			position: absolute;
			top: 50%;
			left: 50%;

			// HACK: the animation will override any transforms so hard-coded values it is
			margin-top: -11px;
			margin-left: -11px;
		}
	}
}
