/*
 * Prevent cases of amp-img converted from img to appear with stretching by using object-fit to scale. Only do this for
 * amp-img/amp-anim elements that we converted from <img> via AMP_Img_Sanitizer. This is key for images that get 100%
 * width such as in the post content so that the contents do not get stretched or cropped.
 * See <https://github.com/ampproject/amphtml/issues/21371#issuecomment-475443219>.
 */
amp-img.amp-wp-enforced-sizes,
amp-anim.amp-wp-enforced-sizes,
.amp-wp-unknown-size {
	object-fit: contain;
}

/**
 * Override a style rule in Twenty Sixteen and Twenty Seventeen.
 * It set display:none for audio elements.
 * This selector is the same, though it adds body and uses amp-audio instead of audio.
 */
body amp-audio:not([controls]) {
	display: inline-block;
	height: auto;
}

/*
 * Style the default template messages for submit-success, submit-error, and submitting. These elements are inserted
 * by the form sanitizer when a POST form lacks the action-xhr attribute.
 */
.amp-wp-default-form-message > p {
	margin: 1em 0;
	padding: 0.5em;
}

.amp-wp-default-form-message[submitting] > p,
.amp-wp-default-form-message[submit-success] > p.amp-wp-form-redirecting {
	font-style: italic;
}

.amp-wp-default-form-message[submit-success] > p:not(.amp-wp-form-redirecting) {
	border: solid 1px #008000;
	background-color: #90ee90;
	color: #000;
}

.amp-wp-default-form-message[submit-error] > p {
	border: solid 1px #f00;
	background-color: #ffb6c1;
	color: #000;
}

/* Prevent showing empty success message in the case of an AMP-Redirect-To response header. */
.amp-wp-default-form-message[submit-success] > p:empty {
	display: none;
}

amp-carousel .amp-wp-gallery-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	padding: 1rem;
	margin-bottom: 0;
}

amp-carousel .amp-wp-gallery-caption a {
	color: inherit;
}

.wp-block-gallery[data-amp-carousel="true"],
.wp-block-gallery[data-amp-carousel="true"].has-nested-images {
	display: block;
	flex-wrap: unset;
}

/*
 * Replicate bottom-margin which is added to .mejs-container by theme styles, although it varies;
 * - 1.5em in Twenty Seventeen
 * - 24px in Twenty Eleven, Twenty Thirteen and Twenty Twelve
 * Other themes set the bottom margin on direct descendants of the .entry-content, in which case this will be overridden.
 *
 * The max-width: 100% is normally applied by to .mejs-container by wp-mediaelement.css but this stylesheet is not
 * included in AMP, so this is why it is included here.
 */
.wp-video {
	margin-bottom: 1.5em;
	max-width: 100%;
}

/*
 * Ensure the aspect-ratio is respected when added by \AMP_Core_Block_Handler::ampify_video_block(). This is only needed
 * when in the loose sandboxing level where a <video> is not converted into <amp-video>, and yet the width/height are
 * both being added. See also <https://github.com/WordPress/gutenberg/pull/37052>.
 */
.wp-block-video video {
	height: auto;
}

/*
 * Ensure the button used to expand AMP components is placed in the bottom left hand corner of the component,
 * where it's most likely to be seen.
 */
button[overflow] {
	bottom: 0;
}

/*
 * Ensure relevant properties for "replaced elements" which are set on sanitizer-converted custom elements will be
 * inherited to the actual replaced element which is the shadow element and also to the noscript fallback element.
 */
amp-anim img,
amp-anim noscript,
amp-iframe iframe,
amp-iframe noscript,
amp-img img,
amp-img noscript,
amp-video video,
amp-video noscript {
	image-rendering: inherit;
	object-fit: inherit;
	object-position: inherit;
}
