/**
 * Respect users who prefer reduced motion.
 * Inspiration taken from sanitize.css
 * https://github.com/csstools/sanitize.css/blob/v13.0.0/reduce-motion.css,
 * itself based on collection at
 * https://github.com/jensimmons/cssremedy/issues/11
 *
 * Note, we also don't set `background-attachment: initial !important;` as
 * setting a background property changes the default rendering of unstyled
 * elements like `button`s and we don't feature `fixed` anywhere in deployed
 * skins or extensions.
 */
/* stylelint-disable declaration-no-important, selector-class-pattern, time-min-milliseconds,
plugin/no-unsupported-browser-features */
@media ( prefers-reduced-motion: reduce ) {
	*,
	::before,
	::after {
		animation-delay: -0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		// Set to `0ms` even though it implicates not firing `transitionend` in certain browsers.
		// Do not set this to non-zero value, as it results in infinite motion on iOS. See T308979.
		transition-duration: 0ms !important;
	}
}

.mw-parser-output .mw-default-size img[ width="@{image-size-standard}" ],
.mw-parser-output .mw-default-size img.mw-file-upright {
	height: auto;
	@calc-standard: ~'var( --image-size-standard ) * var( --mw-file-upright, 1 )';
	width: ~'calc( @{@calc-standard} )';

	@supports ( width: round( 1.5px, 1px ) ) {
		width: ~'calc( round( @{@calc-standard}, 10px ) )';
	}

	html.skin-thumbsize-clientpref-small & {
		@calc-small: ~'var( --image-size-small ) * var( --mw-file-upright, 1 )';
		width: ~'calc( @{calc-small} )';

		@supports ( width: round( 1.5px, 1px ) ) {
			width: ~'calc( round( @{calc-small}, 10px ) )';
		}
	}

	html.skin-thumbsize-clientpref-large & {
		@calc-large: ~'var( --image-size-large ) * var( --mw-file-upright, 1 )';
		width: ~'calc( @{calc-large} )';

		@supports ( width: round( 1.5px, 1px ) ) {
			width: ~'calc( round( @{calc-large}, 10px ) )';
		}
	}
}