@import "minerva.variables";
@import "minerva.mixins";

// FIXME [mediawiki ui] These rules should not be needed and are specifically for Watchlist
// This should use another MediaWiki UI widget
.beta, .alpha {
	.content-header .mw-ui-button-group {
		li.mw-ui-button {
			padding: 0;
			min-width: 30%;
		}

		a:visited,
		a:hover,
		a {
			padding: .5em 1em;
			display: block;
			color: inherit;
			text-decoration: none;
		}
	}
}

.page-header-bar {
	li,
	div {
		line-height: 1.5;
		padding: 5px 0 0;
		border-bottom: 1px solid #e2e2e2;
		text-align: center;
	}
}

.mw-mf-watchlist-selector {
	li {
		display: inline-block;
		border-left: 1px solid #e2e2e2;
		width: 25%;
		margin: 0 0 0 -1px;

		&.selected {
			a {
				border-bottom: solid 3px @blueBase;
				font-weight: bold;
			}
		}

		a {
			display: block;
			color: #58595b;
			margin: 0 1px 0 0;
			border-bottom: 3px solid transparent;
		}
	}
}

// empty watchlist message
// FIXME: Can we generalise these rules into a common design pattern?
.info {
	margin: 3em;
	color: @infoColor;

	img {
		width: 100%;
		max-width: 378px;
		margin: 1em 0 2em;
		display: block;
	}
}

// FIXME: [LiquidThreads] (see bug 53138)
.lqt_watchlist_messages_notice {
	display: none;
}

.mw-mf-user {
	padding: 1px 0 0 20px;
	min-height: 16px;
	color: @grayMediumDark;
	background: url(images/user.png) 0 0 no-repeat;
	.background-size(16px, auto);
}

.mw-mf-anon {
	color: #dc2e16;
	background-image: url(images/user-anon.png);
}

a.more {
	display: block;
	margin-top: 1em;
	text-align: center;
}

.mw-mf-bytesadded {
	color: #00af88;
}

.mw-mf-bytesremoved {
	color: #dc2e16;
}

// FIXME: move when new watchlist in stable
.beta, .alpha {
	.mw-mf-watchlist-selector {
		margin-bottom: -1px;

		li {
			border-bottom: none;
		}
	}

	.mw-mf-user {
		.background-image-svg-quick("images/userNormal");
	}

	.mw-mf-anon {
		color: inherit;
		.background-image-svg-quick("images/userAnonymous");
	}
}