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

@pageHeaderBarBorderColor: #e2e2e2;
@watchlistSelectorBorderColor: #e2e2e2;
@watchlistSelectorLinkColor: #58595b;

// FIXME [mediawiki ui] These rules should not be needed and are specifically for Watchlist
// This should use another MediaWiki UI widget
.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 @colorGray13;
		text-align: center;
	}
}

.mw-mf-watchlist-selector {
	margin-bottom: -1px;

	li {
		display: inline-block;
		border-left: 1px solid @colorGray13;
		width: 25%;
		margin: 0 0 0 -1px;
		border-bottom: none;

		&:first-child {
			border-left: none;
		}

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

		a {
			display: block;
			color: @colorGray5;
			margin: 0 1px 0 0;
			border-bottom: 3px solid transparent;
		}
	}
}

// empty watchlist item (does not include revision information)
// FIXME: Can we generalise these rules into a common design pattern?
.empty-page {
	margin: 3em;
	color: @infoColor;
	text-align: center;
	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 {
	color: @grayMediumDark;
	display: inline-block;  // so that the icon in beta is next to the text when the text is centered
}

.mw-mf-anon {
	color: inherit;
}

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

.mw-mf-bytesadded,
.mw-mf-bytesremoved {
	text-align: left;
}

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

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

.minoredit {
	background: @grayLightest;
	border-radius: 2px;
	font-size: .9em;
	font-weight: bold;
	padding: 0 6px 1px;
}