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

@colorTutorial: #2e76ff;

@media all and ( min-width: @width-breakpoint-tablet ) {
	// Take into account padding in width of pointer overlay so that it
	// can point to anything in the containing content area and avoid
	// padding issues such as https://phabricator.wikimedia.org/F287611
	#mw-mf-page-center .pointer-overlay {
		max-width: @width-breakpoint-desktop;
	}
}

.pointer-overlay {
	width: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	line-height: 1.4;
	font-size: 0.9em;
	text-align: center;
	border-radius: @borderRadius;
	margin-top: 10px;
	color: #fff;
	padding: 1em 16px;

	p {
		line-height: 1.4;
		margin: 0 0 1em;
		text-align: left;
	}

	.button {
		// FIXME: without this the cloaked input seems to interfere making cancel button start upload
		position: relative;
		padding: 12px;
		font-weight: bold;
		width: auto;
	}

	// Generic pointer definition
	.tutorial-pointer {
		position: absolute;
		border-right: 6px solid transparent;
		border-left: 6px solid transparent;
		border-bottom: 6px solid transparent;
	}

	&.pointer-overlay-tutorial {
		background: @colorTutorial;
		box-shadow: none;

		// Pointer color nested so it may be changed in other tutorials
		.tutorial-pointer {
			border-bottom-color: @colorTutorial;
		}

		.button {
			// use background to override gradient in other buttons
			background: #fff;
			border-radius: @borderRadius;
			color: @colorTutorial;
			padding: 6px;
		}

		.cancel.inline {
			background: none;
			color: #fff;
		}

		.button-bar {
			text-align: right;
		}
	}

	&.pointer-overlay-compact {
		background: @colorGray2;
		width: auto;
		/* @noflip */
		right: auto;
		padding: 0.6em;

		// Pointer color nested so it may be changed in other tutorials
		.tutorial-pointer {
			border-bottom-color: @colorGray2;
		}

		p {
			margin: 0;
		}
	}
}