@import 'mediawiki.skin.variables.less';

.mw-revslider-container {
	.client-nojs & {
		display: none;
	}

	@media print {
		display: none;
	}

	/* This will flip with CSSJanus in case */
	/* the interface is in RTL */
	direction: ltr;
	position: relative;
	border: @border-width-base @border-style-base #c8ccd1;

	.mw-revslider-toggle-button.oo-ui-buttonElement-frameless.oo-ui-labelElement {
		width: 100%;
		text-align: center;
		/* Overrule OOUI frameless button `margin` */
		margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
		margin-right: 0;
	}
}

.mw-revslider-toggle-button {
	.oo-ui-buttonElement-button {
		width: 100%;
	}

	.oo-ui-iconElement-icon {
		/* Overrule OOUI iconElement `left` */
		left: auto !important; /* stylelint-disable-line declaration-no-important */
		right: 0.28571429em;
		/* For OOUI-Apex */
		position: absolute;
	}
}

.mw-revslider-slider-wrapper {
	// Same as the .mw-revslider-arrow height
	min-height: 142px;
	border-top: @border-width-base @border-style-base #c8ccd1;
	padding: 20px 10px;
	// Not a fix for resize issues like T336729 but makes it appear much less broken
	overflow-x: clip;
}

/* Loading spinner code borrowed from
https://codepen.io/Volker_E/pen/yqNXMe */
.mw-revslider-spinner {
	white-space: nowrap;
	display: block;
	max-width: 56px;
	margin: 60px auto;

	.mw-revslider-bounce,
	&::before,
	&::after {
		content: '';
		background-color: #72777d;
		display: block;
		float: left;
		width: 16px;
		height: 16px;
		border-radius: @border-radius-circle;
		animation: bouncedelay 1600ms infinite ease-in-out both;
		animation-delay: -160ms;
	}

	&::before {
		margin-right: 4px;
		animation-delay: -330ms;
	}

	&::after {
		margin-left: 4px;
		animation-delay: 0s;
	}
}

@keyframes bouncedelay {
	0%,
	50%, /* equals 800ms */
	100% {
		transform: scale( 0.625 );
	}

	20% { /* equals 320ms */
		opacity: 0.87;
		transform: scale( 1 );
	}
}