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

.backtotop {
	/* initially hide the element */
	visibility: hidden;
	opacity: 0;

	/* basic styling */
	position: fixed;
	width: 2.5em;
	height: 2.5em;
	border-radius: 100%;
	box-shadow: 0.1em 0.2em 0.3em @colorGray12;
	bottom: 20px;
	right: 0;
	cursor: pointer;
	z-index: @z-indexOverlay;
	background-color: @colorProgressive;

	/* define what happens, if the visible class is added/removed, add a nice fade out/in */
	.transition( opacity 0.5s 0s );

	&.visible {
		&:hover {
			opacity: 1;
		}
		opacity: 0.8;
	}

	> .arrow-up {
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate( -50%, -50% );
	}
}