@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';
@import 'mediawiki.mixins.animation.less';

@animationDuration: 0.3s;

.mw-mf-page-center__mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	bottom: 0;
	background: @semiTransparent;
	z-index: @z-indexAboveContent;
	// don't use display: none because it's not animatable
	visibility: hidden;
	.transition( opacity @transition-duration-base ease-in-out; );
}

.navigation-enabled {
	.mw-mf-page-center__mask {
		visibility: visible;
		opacity: 0.5;
	}
}

// Flip the arrow in table of contents when toggled
.toctogglecheckbox:checked ~ .toctitle .mw-ui-icon:last-child {
	&:before {
		.transform( rotate( -180deg ) );
	}
}

// Last modified bar styles
.last-modified-bar {
	&.active {
		background-color: @lastModifiedBarActiveBackgroundColor;
		color: #fff;

		.last-modified-text-accent,
		a {
			color: #fff;
		}
	}
}

// Used by last modified bar and in MobileFrontend (i.e. MobileSpecialPageFeed.php, ImageCarousel.js)
.truncated-text {
	.text-overflow( @visible: false );
}

@-webkit-keyframes fadeInImage {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeInImage {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

// When the image has loaded transition background color and image opacity
// for a fade-in effect
img.image-lazy-loaded {
	.animation( fadeInImage @animationDuration ease-in );
}