@import "mediawiki.ui/variables";
@import "mediawiki.mixins";

@notificationWidth: 360px;
@gutterWidth: 46px;
@headerHeight: 50px;

.postedit {
	display: none !important;
}

.mw-gettingstarted-lightbulb-notification {
	position: fixed;
	top: 10px;
	left: 50%;
	margin-left: -@notificationWidth / 2;
	width: @notificationWidth;
	background-color: #fff;
	color: #555;
	font-size: 0.875em;

	// Be consistent with the default post-edit notification.
	z-index: 1000;

	border: 1px solid #ccc;
	.box-shadow(0 0 4px rgba(0, 0, 0, 0.2));

	.mw-gettingstarted-lightbulb-notification-header {
		position: relative;
		height: @headerHeight;
		padding: 0 @gutterWidth;
	}

	h1 {
		height: @headerHeight;
		line-height: @headerHeight;
		overflow: visible;

		&:before {
			position: absolute;
			display: block;
			content: '';
			width: 16px;
			height: 16px;
			.background-image-svg('../images/lightbulb/check.svg', '../images/lightbulb/check.png');
			background-repeat: no-repeat;
			background-size: 100%;
			top: 17px;
			left: (-@gutterWidth / 2px) - 8px;
		}
	}

	.mw-gettingstarted-lightbulb-notification-hide {
		position: absolute;
		width: 13px;
		height: 13px;
		.background-image-svg('../images/x.svg', '../images/x.png');
		top: 19px;
		right: 19px;
	}

	.mw-gettingstarted-lightbulb-notification-body {
		background-color: @colorGray15;
		padding: 10px 50px;

		p {
			padding: 0;
			margin: 0 0 6px 0;
		}
	}
}